Cara membuat website dinamis menggunakan html, css, javascript php dan mysql

Bab-bab dalam buku ini ditulis dalam urutan tertentu, pertama-tama memperkenalkan semua teknologi inti yang dicakupnya dan kemudian memandu Anda melalui pemasangannya di server pengembangan web sehingga Anda siap bekerja melalui contoh-contohnya.

Pada bagian pertama, Anda akan mendapatkan landasan dalam bahasa pemrograman PHP, meliputi dasar-dasar sintaksis, array, fungsi, dan pemrograman berorientasi objek.

Kemudian, dengan PHP di bawah ikat pinggang Anda, Anda akan beralih ke pengantar sistem database MySQL, di mana Anda akan mempelajari segalanya mulai dari bagaimana database MySQL disusun hingga cara menghasilkan kueri yang kompleks

Setelah itu, Anda akan belajar bagaimana menggabungkan PHP dan MySQL untuk mulai membuat halaman web dinamis Anda sendiri dengan mengintegrasikan formulir dan fitur HTML lainnya. Anda kemudian akan masuk ke aspek praktis seluk beluk pengembangan PHP dan MySQL dengan mempelajari berbagai fungsi berguna dan cara mengelola cookie dan sesi, serta cara mempertahankan tingkat keamanan yang tinggi

Dalam beberapa bab berikutnya, Anda akan mendapatkan landasan menyeluruh dalam JavaScript, mulai dari fungsi sederhana dan penanganan peristiwa hingga mengakses Model Objek Dokumen, validasi dalam browser, dan penanganan kesalahan. Anda juga akan mendapatkan panduan komprehensif tentang cara menggunakan pustaka React untuk JavaScript yang populer

Dengan pemahaman tentang ketiga teknologi inti ini, Anda kemudian akan belajar bagaimana melakukan panggilan Ajax di belakang layar dan mengubah situs web Anda menjadi lingkungan yang sangat dinamis.

Selanjutnya, Anda akan menghabiskan dua bab untuk mempelajari semua tentang penggunaan CSS untuk mendesain dan menata halaman web Anda, sebelum menemukan bagaimana perpustakaan React dapat membuat pekerjaan pengembangan Anda jauh lebih mudah. Anda kemudian akan beralih ke bagian terakhir tentang fitur interaktif yang dibuat dalam HTML5, termasuk geolokasi, audio, video, dan kanvas. Setelah ini, Anda akan mengumpulkan semua yang telah Anda pelajari dalam satu set program lengkap yang bersama-sama membentuk situs web jejaring sosial yang berfungsi penuh

Sepanjang jalan, Anda akan menemukan banyak saran tentang praktik dan tip pemrograman yang baik yang dapat membantu Anda menemukan dan mengatasi kesalahan pemrograman yang sulit dideteksi. Ada juga banyak tautan ke situs web yang berisi perincian lebih lanjut tentang topik yang dibahas

World Wide Web adalah jaringan yang terus berkembang yang telah berjalan jauh melampaui konsepsinya pada awal 1990-an, ketika diciptakan untuk memecahkan masalah tertentu. Eksperimen canggih di CERN (Laboratorium Fisika Partikel Eropa—sekarang paling dikenal sebagai operator Large Hadron Collider) menghasilkan data dalam jumlah yang luar biasa—sedemikian rupa sehingga data tersebut terbukti sulit untuk didistribusikan ke peserta

Pada saat ini, Internet sudah ada, dengan beberapa ratus ribu komputer terhubung dengannya, jadi Tim Berners-Lee (seorang rekan CERN) merancang metode navigasi di antara mereka menggunakan kerangka kerja hyperlink, yang kemudian dikenal sebagai Hypertext Transfer. . Dia juga menciptakan bahasa markup yang disebut HTML, atau Hypertext Markup Language. Untuk menyatukan ini, dia menulis browser web dan server web pertama, alat yang sekarang kita terima begitu saja

Tapi saat itu, konsepnya revolusioner. Konektivitas terbanyak sejauh ini yang dialami oleh pengguna modem di rumah adalah melakukan panggilan dan menghubungkan ke papan buletin yang dihosting oleh satu komputer, tempat Anda dapat berkomunikasi dan bertukar data hanya dengan pengguna lain dari layanan tersebut. Konsekuensinya, Anda harus menjadi anggota dari banyak sistem papan buletin agar dapat berkomunikasi secara elektronik secara efektif dengan kolega dan teman Anda

Tapi Berners-Lee mengubah semua itu dalam satu gerakan, dan pada pertengahan 1990-an, ada tiga browser web grafis utama yang bersaing untuk menarik perhatian lima juta pengguna. Namun, segera menjadi jelas bahwa ada sesuatu yang hilang. Ya, halaman teks dan grafik dengan hyperlink untuk membawa Anda ke halaman lain adalah konsep yang brilian, tetapi hasilnya tidak mencerminkan potensi instan komputer dan Internet untuk memenuhi kebutuhan khusus setiap pengguna dengan konten yang berubah secara dinamis. Menggunakan Web adalah pengalaman yang sangat kering dan sederhana, bahkan jika kami sekarang memiliki teks bergulir dan GIF animasi

Keranjang belanja, mesin telusur, dan jejaring sosial jelas telah mengubah cara kita menggunakan Web. Dalam bab ini, kita akan melihat secara singkat berbagai komponen yang membentuk Web, dan perangkat lunak yang membantu menjadikannya pengalaman yang kaya dan dinamis.

Catatan

Anda perlu segera mulai menggunakan beberapa akronim. Saya telah mencoba menjelaskannya dengan jelas sebelum melanjutkan. Tapi jangan terlalu khawatir tentang apa artinya atau apa arti nama-nama ini, karena semua detailnya akan menjadi jelas saat Anda membaca.

HTTP dan HTML. Dasar Berners-Lee

HTTP adalah standar komunikasi yang mengatur permintaan dan tanggapan yang terjadi antara browser yang berjalan di komputer pengguna akhir dan server web. Tugas server adalah menerima permintaan dari klien dan berusaha membalasnya dengan cara yang berarti, biasanya dengan menyajikan halaman web yang diminta — itulah mengapa istilah server digunakan. Mitra alami ke server adalah klien, sehingga istilah itu diterapkan baik ke browser web maupun komputer tempat server berjalan

Antara client dan server bisa terdapat beberapa perangkat lain, seperti router, proxy, gateway, dan lain sebagainya. Mereka melayani peran yang berbeda dalam memastikan bahwa permintaan dan tanggapan ditransfer dengan benar antara klien dan server. Biasanya, mereka menggunakan Internet untuk mengirim informasi ini

Server web biasanya dapat menangani beberapa koneksi simultan dan—ketika tidak berkomunikasi dengan klien—menghabiskan waktunya untuk mendengarkan koneksi masuk. Ketika seseorang tiba, server mengirimkan kembali tanggapan untuk mengonfirmasi penerimaannya

Prosedur Permintaan/Tanggapan

Pada tingkat yang paling dasar, proses request/response terdiri dari web browser yang meminta web server untuk mengirimkan halaman web dan server mengirimkan kembali halaman tersebut. Browser kemudian menangani tampilan halaman (lihat )

Gambar 1-1. Urutan permintaan/respons klien/server dasar

Setiap langkah dalam urutan permintaan dan respons adalah sebagai berikut

1. Anda memasukkan http. //server. com ke bilah alamat browser Anda

2. Browser Anda mencari alamat IP untuk server. com

3. Browser Anda mengeluarkan permintaan untuk beranda di server. com

4. Permintaan melintasi Internet dan tiba di server. server web com

5. Server web, setelah menerima permintaan, mencari halaman web di hard disknya

6. Halaman web diambil oleh server dan dikembalikan ke browser

7. Browser Anda menampilkan halaman web

Untuk halaman web rata-rata, proses ini terjadi sekali untuk setiap objek di dalam halaman. grafik, video tersemat atau file Flash, dan bahkan template CSS

Pada langkah 2, perhatikan bahwa browser mencari alamat IP server. com. Setiap mesin yang tersambung ke Internet memiliki alamat IP—termasuk komputer Anda. Namun umumnya kita mengakses web server dengan nama, seperti google. com. Seperti yang mungkin Anda ketahui, browser berkonsultasi dengan layanan Internet tambahan yang disebut Layanan Nama Domain (DNS) untuk menemukan alamat IP yang terkait dan kemudian menggunakannya untuk berkomunikasi dengan komputer.

Untuk halaman web dinamis, prosedurnya sedikit lebih rumit, karena dapat menggabungkan PHP dan MySQL (lihat )

Gambar 1-2. Urutan permintaan/respon klien/server yang dinamis

Berikut adalah langkah-langkah untuk urutan permintaan/respons klien/server dinamis

1. Anda memasukkan http. //server. com ke bilah alamat browser Anda

2. Browser Anda mencari alamat IP untuk server. com

3. Browser Anda mengeluarkan permintaan ke alamat itu untuk beranda server web

4. Permintaan melintasi Internet dan tiba di server. server web com

5. Server web, setelah menerima permintaan, mengambil halaman beranda dari hard disknya

6. Dengan halaman beranda sekarang di memori, server web memperhatikan bahwa itu adalah file yang menggabungkan skrip PHP dan meneruskan halaman tersebut ke juru bahasa PHP

7. Interpreter PHP mengeksekusi kode PHP

8. Beberapa PHP berisi pernyataan MySQL, yang sekarang diteruskan oleh juru bahasa PHP ke mesin database MySQL

9. Database MySQL mengembalikan hasil pernyataan kembali ke juru bahasa PHP

10. Interpreter PHP mengembalikan hasil kode PHP yang dieksekusi, bersama dengan hasil dari database MySQL, ke server web

11. Server web mengembalikan halaman ke klien yang meminta, yang menampilkannya

Meskipun sangat membantu untuk menyadari proses ini sehingga Anda tahu bagaimana ketiga elemen bekerja sama, dalam praktiknya Anda tidak perlu terlalu memikirkan detail ini, karena semuanya terjadi secara otomatis.

Halaman HTML yang dikembalikan ke browser di setiap contoh mungkin berisi JavaScript, yang akan diinterpretasikan secara lokal oleh klien, dan yang dapat memulai permintaan lain—sama seperti objek yang disematkan seperti gambar.

Manfaat PHP, MySQL, JavaScript, CSS, dan HTML5

Di awal bab ini, saya memperkenalkan dunia Web 1. 0, tetapi tidak lama kemudian terburu-buru untuk membuat Web 1. 1, dengan pengembangan peningkatan peramban seperti Java, JavaScript, JScript (sedikit varian JavaScript dari Microsoft), dan ActiveX. Di sisi server, kemajuan dibuat pada Common Gateway Interface (CGI) menggunakan bahasa skrip seperti Perl (alternatif untuk bahasa PHP) dan skrip sisi server—memasukkan konten dari satu file (atau output dari sistem).

Setelah debu mengendap, tiga teknologi utama berdiri tegak di atas yang lain. Meskipun Perl masih merupakan bahasa skrip yang populer dengan pengikut yang kuat, kesederhanaan PHP dan tautan bawaan ke program database MySQL telah menghasilkan lebih dari dua kali lipat jumlah pengguna. Dan JavaScript, yang telah menjadi bagian penting dari persamaan untuk memanipulasi CSS (Cascading Style Sheets) dan HTML secara dinamis, kini mengambil tugas yang bahkan lebih berotot untuk menangani sisi klien dari proses Ajax. Di bawah Ajax, halaman web melakukan penanganan data dan mengirimkan permintaan ke server web di latar belakang—tanpa disadari oleh pengguna web bahwa hal ini sedang terjadi

Tidak diragukan lagi sifat simbiosis dari PHP dan MySQL membantu mendorong mereka berdua maju, tetapi apa yang membuat pengembang tertarik pada mereka? . MySQL adalah sistem database yang cepat dan kuat, namun mudah digunakan, yang menawarkan apa saja yang diperlukan situs web untuk menemukan dan menyajikan data ke browser. Saat PHP bersekutu dengan MySQL untuk menyimpan dan mengambil data ini, Anda memiliki bagian mendasar yang diperlukan untuk pengembangan situs jejaring sosial dan permulaan Web 2. 0

Dan ketika Anda juga menggabungkan JavaScript dan CSS, Anda memiliki resep untuk membangun situs web yang sangat dinamis dan interaktif

Dengan PHP, menyematkan aktivitas dinamis di halaman web adalah hal yang mudah. Ketika Anda memberikan halaman. php, mereka memiliki akses instan ke bahasa scripting. Dari sudut pandang pengembang, yang harus Anda lakukan hanyalah menulis kode seperti berikut

Here's the latest news.

Tag pembuka tells the web server to allow the PHP program to interpret all the following code up to the ?>. Di luar konstruksi ini, semuanya dikirim ke klien sebagai HTML langsung. Jadi teks Here's the latest news. hanyalah keluaran ke browser;

Today is Wednesday. Here's the latest news.

Today is Wednesday. Here's the latest news.

Today is Wednesday. Here's the latest news.

Today is . Here's the latest news.

Today is Wednesday. Here's the latest news.

Today is Wednesday. Here's the latest news.

Today is Wednesday. Here's the latest news.

Today is Wednesday. Here's the latest news.

Today is Wednesday. Here's the latest news.

Today is Wednesday. Here's the latest news.

Today is Wednesday. Here's the latest news.

Today is . Here's the latest news.

Today is . Here's the latest news.

INSERT INTO users VALUES('Smith', 'John', '[email protected]');

Today is . Here's the latest news.

Today is . Here's the latest news.

Today is . Here's the latest news.

SELECT surname,firstname FROM users WHERE email='[email protected]';

Today is . Here's the latest news.

Today is . Here's the latest news.

Today is . Here's the latest news.

INSERT INTO users VALUES('Smith', 'John', '[email protected]');

INSERT INTO users VALUES('Smith', 'John', '[email protected]');

INSERT INTO users VALUES('Smith', 'John', '[email protected]');

INSERT INTO users VALUES('Smith', 'John', '[email protected]');

INSERT INTO users VALUES('Smith', 'John', '[email protected]');

INSERT INTO users VALUES('Smith', 'John', '[email protected]');

INSERT INTO users VALUES('Smith', 'John', '[email protected]');

INSERT INTO users VALUES('Smith', 'John', '[email protected]');