SlideShare una empresa de Scribd logo
1 de 3
Untuk memasuki tutorial ini , saya sarankan untu anda agar lebih dahulu membaca Dasar Pembuatan
Web Dinamis , ebsof akan menjelaskan tahap demi tahap pembuatan web dinamais, Pada judul tutorial ini
yaitu "Membuat Web Dinamis (Bagian 1)" , sesuai judulnya "Bagian 1" , Bahwa ini adalah langkah awal
dalam pembuatan website yang mempunyai sistem dinamis, bukan statis.
Hal yang harus diperhatikan sebelum memulai pembuatan ialah , Menentukan bentuk dan Jenis serta tujuan
Website yang ingin dibuat, Tidak panjang lebar lagi, Kali ini Ebsof akan menjelaskan Tahap demi Tahap
Pembuatan Web Portal secara dinamis dengan melibatkan bahasa HTML, PHP, CSS, Java Sript.
Berikut Flowchart Web dinamis Yang Ingin Kita buat :
Text Editor yang saya gunakan pada Tutorial-tutorial ini : Macromedia Dreamweaver MX , dan Anda
Harus sudah menginstal Xampp di komputer anda. Ok Langsung ke TKP :
1. Buat Layout seperti dibawah ini dengan menggunakan table, kemudian simpan dengan nama
"index.php"
Gambar. 1.1 (Sekema/Layout Website)
Gambar di atas merupakan rancangan sekema bentuk website yang ingin kita buat. ada pun properti-nya
ialah sebagai berikut :
Table Terdiri dari 4 baris dan 2 Kolom
Ukuran Table Width = "800 px"
Baris Pertama adalah bagian "Header". , Hight = 100 px. (Untuk tinggi Header ini dinamis, artinya
terserah berapa nilai yang ingin anda beri.
Baris Kedua, Biarkan defult, jangan di rubah-rubah
Baris Ketiga . Disini terdapat 2 Kolom. Kolom Pertama adalah Bagian Menu ( Width="200"
hight="600") , Kolom Kedua merupakan Bagian Content Website ( Width="600")
Baris Ke empat ( bagian Footer website ) , atur ketinggian (Hight="80") ini terserah berapa
ukurannya.
Jika anda belum mengerti bagaimana cara pembuatan layout di atas, silahkan baca Membuat Website
Menggunakan Dremweaver MX Bagian I
Berikut script diatas :
view plainprint?
1. <!DOCTYPE HTML PUBLIC "-
//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2. <html>
3. <head>
4. <title>Web Portal Ebsof</title>
5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
6. </head>
7.
8. <body>
9. <table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
10. <tr bgcolor="#003366">
11. <td height="100" colspan="2">&nbsp;</td>
12. </tr>
13. <tr bgcolor="#CCFF66">
14. <td colspan="2">&nbsp;</td>
15. </tr>
16. <tr>
17. <td width="200" height="600" valign="top" bgcolor="#00CCFF">&nbsp;</td>
18. <td valign="top">&nbsp;</td>
19. </tr>
20. <tr bgcolor="#0099FF">
21. <td height="80" colspan="2">&nbsp;</td>
22. </tr>
23. </table>
24. </body>
25. </html>
Untuk hasil dari script di atas dapat dilihat seperti dibawah ini :
anda bisa mencopy langsung script diatas, dan simpanlah dengan Nama : "index.php" dan simpanlah
di folder Xampp-> Htdocs->buat folder baru di dalam Htdocs, dan simpan file "index.php" didalamnya.
Jangan lupa aktifkan terlebih dahulu service Apache dan Mysql Xampp anda terlebih dahulu.. untuk melihat
hasilnya di browser anda.
Untuk Lanjutan dari Materi Ini.. Bisa di Lihat Pada "Membuat Website Dinamis Bagian II (Membuat
Halaman Admin Web Dinamis "
Update :
Website Dinamis Ini Sudah di Upadate Terus Jika Anda Ingin Melihat Hasil Dari Tutorial-Tutorial
Saya Membuat Website Dinamis Langsung aja
"Website Dinamis + Source Code + Demo Website "
Hanya ada di : http://hasifdiary.blogspot.com/

Más contenido relacionado

La actualidad más candente

Cara upload website ke internet
Cara upload website ke internetCara upload website ke internet
Cara upload website ke internet
Ahmad Ficky
 
Cara membuat gambar di blog membesar saat disorot mouse
Cara membuat gambar di blog membesar saat disorot mouseCara membuat gambar di blog membesar saat disorot mouse
Cara membuat gambar di blog membesar saat disorot mouse
Operator Warnet Vast Raha
 

La actualidad más candente (19)

Cara Instal Wordpress Dengan Mudah
Cara Instal Wordpress Dengan MudahCara Instal Wordpress Dengan Mudah
Cara Instal Wordpress Dengan Mudah
 
Membuat blog
Membuat blogMembuat blog
Membuat blog
 
Modul dasar html
Modul dasar htmlModul dasar html
Modul dasar html
 
2014-43. Pemrograman Web
2014-43. Pemrograman Web2014-43. Pemrograman Web
2014-43. Pemrograman Web
 
How to install content management system (cms)
How to install content management system (cms)How to install content management system (cms)
How to install content management system (cms)
 
Modul html
Modul htmlModul html
Modul html
 
Panduan
PanduanPanduan
Panduan
 
asad
asadasad
asad
 
Mengoptimalkan Website Ormawa di ITS | Medschool 3.0
Mengoptimalkan Website Ormawa di ITS | Medschool 3.0Mengoptimalkan Website Ormawa di ITS | Medschool 3.0
Mengoptimalkan Website Ormawa di ITS | Medschool 3.0
 
Pertemuan 2 Memulai Wordpress
Pertemuan 2  Memulai WordpressPertemuan 2  Memulai Wordpress
Pertemuan 2 Memulai Wordpress
 
01.Rekayasa Web
01.Rekayasa Web01.Rekayasa Web
01.Rekayasa Web
 
Revolusi Minisite Tanpa Domain Dan Web Hosting
Revolusi Minisite Tanpa Domain Dan Web HostingRevolusi Minisite Tanpa Domain Dan Web Hosting
Revolusi Minisite Tanpa Domain Dan Web Hosting
 
Cara buat landing page blogspot
Cara buat landing page blogspot Cara buat landing page blogspot
Cara buat landing page blogspot
 
Cara upload website ke internet
Cara upload website ke internetCara upload website ke internet
Cara upload website ke internet
 
Materi praktikum e commerce
Materi praktikum e commerceMateri praktikum e commerce
Materi praktikum e commerce
 
Cara membuat gambar di blog membesar saat disorot mouse
Cara membuat gambar di blog membesar saat disorot mouseCara membuat gambar di blog membesar saat disorot mouse
Cara membuat gambar di blog membesar saat disorot mouse
 
Materi praktikum e commerce vi
Materi praktikum e commerce viMateri praktikum e commerce vi
Materi praktikum e commerce vi
 
tutorial meng install Cms balitbang
tutorial meng install Cms balitbangtutorial meng install Cms balitbang
tutorial meng install Cms balitbang
 
Membuat curriculum vitae
Membuat curriculum vitaeMembuat curriculum vitae
Membuat curriculum vitae
 

Similar a Cara membuat web dinamis dengan php mysql part1

Ujian tengah semester komputer terapan
Ujian tengah semester komputer terapanUjian tengah semester komputer terapan
Ujian tengah semester komputer terapan
nofayanties
 
Panduan Dasar Web Matrix
Panduan Dasar Web MatrixPanduan Dasar Web Matrix
Panduan Dasar Web Matrix
Mas Tri Sragen
 
Ujian tengah semester komputer terapan
Ujian tengah semester komputer terapanUjian tengah semester komputer terapan
Ujian tengah semester komputer terapan
M Paramananda
 
Tutorial web programing
Tutorial web programingTutorial web programing
Tutorial web programing
eghha
 
Belajar membuat website
Belajar membuat websiteBelajar membuat website
Belajar membuat website
Nadya Olivia
 
Desain web 2 kolom
Desain web 2 kolomDesain web 2 kolom
Desain web 2 kolom
Haswi Haswi
 

Similar a Cara membuat web dinamis dengan php mysql part1 (20)

Java web application 2 - membuat template web
Java web application 2 - membuat template webJava web application 2 - membuat template web
Java web application 2 - membuat template web
 
Tugas9 ku-0316-dody alfad-1511510669
Tugas9 ku-0316-dody alfad-1511510669Tugas9 ku-0316-dody alfad-1511510669
Tugas9 ku-0316-dody alfad-1511510669
 
Cover
CoverCover
Cover
 
Modul html
Modul htmlModul html
Modul html
 
pemrograman internet
pemrograman internetpemrograman internet
pemrograman internet
 
Ujian tengah semester komputer terapan
Ujian tengah semester komputer terapanUjian tengah semester komputer terapan
Ujian tengah semester komputer terapan
 
Adit
AditAdit
Adit
 
Belajar php
Belajar phpBelajar php
Belajar php
 
Belajar php
Belajar phpBelajar php
Belajar php
 
Panduan Dasar Web Matrix
Panduan Dasar Web MatrixPanduan Dasar Web Matrix
Panduan Dasar Web Matrix
 
Bab 1-instalasi
Bab 1-instalasiBab 1-instalasi
Bab 1-instalasi
 
Ujian tengah semester komputer terapan
Ujian tengah semester komputer terapanUjian tengah semester komputer terapan
Ujian tengah semester komputer terapan
 
Laporan web
Laporan webLaporan web
Laporan web
 
Java Web Form Pendaftaran - JSP
Java Web Form Pendaftaran - JSPJava Web Form Pendaftaran - JSP
Java Web Form Pendaftaran - JSP
 
Modul web-design
Modul web-designModul web-design
Modul web-design
 
Tutorial web programing
Tutorial web programingTutorial web programing
Tutorial web programing
 
Belajar membuat website
Belajar membuat websiteBelajar membuat website
Belajar membuat website
 
Tugas ptik
Tugas ptikTugas ptik
Tugas ptik
 
Macromedia dreamweaver-8
Macromedia dreamweaver-8Macromedia dreamweaver-8
Macromedia dreamweaver-8
 
Desain web 2 kolom
Desain web 2 kolomDesain web 2 kolom
Desain web 2 kolom
 

Último

Abortion pills in Muscat ( Oman) +966572737505! Get CYTOTEC, unwanted kit mis...
Abortion pills in Muscat ( Oman) +966572737505! Get CYTOTEC, unwanted kit mis...Abortion pills in Muscat ( Oman) +966572737505! Get CYTOTEC, unwanted kit mis...
Abortion pills in Muscat ( Oman) +966572737505! Get CYTOTEC, unwanted kit mis...
Abortion pills in Riyadh +966572737505 get cytotec
 
Hub. 0821 4281 1002, Rekomendasi Restoran Rumah Makan Kulineran Warung Depot ...
Hub. 0821 4281 1002, Rekomendasi Restoran Rumah Makan Kulineran Warung Depot ...Hub. 0821 4281 1002, Rekomendasi Restoran Rumah Makan Kulineran Warung Depot ...
Hub. 0821 4281 1002, Rekomendasi Restoran Rumah Makan Kulineran Warung Depot ...
syafiraw266
 
Sistem-Informasi-Akuntansi-Pertemuan-10.ppt
Sistem-Informasi-Akuntansi-Pertemuan-10.pptSistem-Informasi-Akuntansi-Pertemuan-10.ppt
Sistem-Informasi-Akuntansi-Pertemuan-10.ppt
Ika Putri
 
ATRIUM GAMING : SLOT GACOR MUDAH MENANG 2024 TERBARU
ATRIUM GAMING : SLOT GACOR MUDAH MENANG 2024 TERBARUATRIUM GAMING : SLOT GACOR MUDAH MENANG 2024 TERBARU
ATRIUM GAMING : SLOT GACOR MUDAH MENANG 2024 TERBARU
sayangkamuu240203
 
Perkembangan Perbankan di Indonesia Perkembangan Perbankan di Indonesia
Perkembangan Perbankan di Indonesia Perkembangan Perbankan di IndonesiaPerkembangan Perbankan di Indonesia Perkembangan Perbankan di Indonesia
Perkembangan Perbankan di Indonesia Perkembangan Perbankan di Indonesia
langkahgontay88
 
bahan paparan satgas penilaian kinerja tpps.pptx
bahan paparan satgas penilaian kinerja tpps.pptxbahan paparan satgas penilaian kinerja tpps.pptx
bahan paparan satgas penilaian kinerja tpps.pptx
ZainalArifin848408
 

Último (20)

Pernyataan SAK 1 Pelaporan Keuangan.pptx
Pernyataan SAK 1 Pelaporan Keuangan.pptxPernyataan SAK 1 Pelaporan Keuangan.pptx
Pernyataan SAK 1 Pelaporan Keuangan.pptx
 
Abortion pills in Muscat ( Oman) +966572737505! Get CYTOTEC, unwanted kit mis...
Abortion pills in Muscat ( Oman) +966572737505! Get CYTOTEC, unwanted kit mis...Abortion pills in Muscat ( Oman) +966572737505! Get CYTOTEC, unwanted kit mis...
Abortion pills in Muscat ( Oman) +966572737505! Get CYTOTEC, unwanted kit mis...
 
PPT Klp 5 Sistem Informasi Manajemen.pdf
PPT Klp 5 Sistem Informasi Manajemen.pdfPPT Klp 5 Sistem Informasi Manajemen.pdf
PPT Klp 5 Sistem Informasi Manajemen.pdf
 
BAMBUHOKI88 Situs Game Gacor Menggunakan Doku Mudah Jackpot Besar
BAMBUHOKI88 Situs Game Gacor Menggunakan Doku Mudah Jackpot BesarBAMBUHOKI88 Situs Game Gacor Menggunakan Doku Mudah Jackpot Besar
BAMBUHOKI88 Situs Game Gacor Menggunakan Doku Mudah Jackpot Besar
 
APAKAH LOGISTIK SIAP UNTUK PERTUMBUHAN? Michael Rada
APAKAH LOGISTIK SIAP UNTUK PERTUMBUHAN? Michael RadaAPAKAH LOGISTIK SIAP UNTUK PERTUMBUHAN? Michael Rada
APAKAH LOGISTIK SIAP UNTUK PERTUMBUHAN? Michael Rada
 
Hub. 0821 4281 1002, Rekomendasi Restoran Rumah Makan Kulineran Warung Depot ...
Hub. 0821 4281 1002, Rekomendasi Restoran Rumah Makan Kulineran Warung Depot ...Hub. 0821 4281 1002, Rekomendasi Restoran Rumah Makan Kulineran Warung Depot ...
Hub. 0821 4281 1002, Rekomendasi Restoran Rumah Makan Kulineran Warung Depot ...
 
Sistem-Informasi-Akuntansi-Pertemuan-10.ppt
Sistem-Informasi-Akuntansi-Pertemuan-10.pptSistem-Informasi-Akuntansi-Pertemuan-10.ppt
Sistem-Informasi-Akuntansi-Pertemuan-10.ppt
 
LAPORAN HASIL OBSERVASI ENGLISH COURSE (1).docx
LAPORAN HASIL OBSERVASI ENGLISH COURSE (1).docxLAPORAN HASIL OBSERVASI ENGLISH COURSE (1).docx
LAPORAN HASIL OBSERVASI ENGLISH COURSE (1).docx
 
Nilai-Waktu-Uang.pptx kdgmkgkdm ksfmkdkmdg
Nilai-Waktu-Uang.pptx kdgmkgkdm ksfmkdkmdgNilai-Waktu-Uang.pptx kdgmkgkdm ksfmkdkmdg
Nilai-Waktu-Uang.pptx kdgmkgkdm ksfmkdkmdg
 
analisa kelayakan bisnis aspek keuangan.
analisa kelayakan bisnis aspek keuangan.analisa kelayakan bisnis aspek keuangan.
analisa kelayakan bisnis aspek keuangan.
 
ATRIUM GAMING : SLOT GACOR MUDAH MENANG 2024 TERBARU
ATRIUM GAMING : SLOT GACOR MUDAH MENANG 2024 TERBARUATRIUM GAMING : SLOT GACOR MUDAH MENANG 2024 TERBARU
ATRIUM GAMING : SLOT GACOR MUDAH MENANG 2024 TERBARU
 
Perkembangan Perbankan di Indonesia Perkembangan Perbankan di Indonesia
Perkembangan Perbankan di Indonesia Perkembangan Perbankan di IndonesiaPerkembangan Perbankan di Indonesia Perkembangan Perbankan di Indonesia
Perkembangan Perbankan di Indonesia Perkembangan Perbankan di Indonesia
 
Bab 11 Liabilitas Jangka Pendek dan Penggajian.pptx
Bab 11 Liabilitas Jangka Pendek dan   Penggajian.pptxBab 11 Liabilitas Jangka Pendek dan   Penggajian.pptx
Bab 11 Liabilitas Jangka Pendek dan Penggajian.pptx
 
ASKEP WAHAM KELOMPOK 4 vvvvvvvvvPPT.pptx
ASKEP WAHAM KELOMPOK 4 vvvvvvvvvPPT.pptxASKEP WAHAM KELOMPOK 4 vvvvvvvvvPPT.pptx
ASKEP WAHAM KELOMPOK 4 vvvvvvvvvPPT.pptx
 
UNIKBET : Bandar Slot Gacor Pragmatic Play Deposit Pakai Bank Mega Bonus Berl...
UNIKBET : Bandar Slot Gacor Pragmatic Play Deposit Pakai Bank Mega Bonus Berl...UNIKBET : Bandar Slot Gacor Pragmatic Play Deposit Pakai Bank Mega Bonus Berl...
UNIKBET : Bandar Slot Gacor Pragmatic Play Deposit Pakai Bank Mega Bonus Berl...
 
bahan paparan satgas penilaian kinerja tpps.pptx
bahan paparan satgas penilaian kinerja tpps.pptxbahan paparan satgas penilaian kinerja tpps.pptx
bahan paparan satgas penilaian kinerja tpps.pptx
 
Media Pembelajaran Ekonomi XI - Bab 5.pptx
Media Pembelajaran Ekonomi XI - Bab 5.pptxMedia Pembelajaran Ekonomi XI - Bab 5.pptx
Media Pembelajaran Ekonomi XI - Bab 5.pptx
 
STRATEGI BERSAING MENGGUNAKAN ANALISIS SWOT
STRATEGI BERSAING MENGGUNAKAN ANALISIS SWOTSTRATEGI BERSAING MENGGUNAKAN ANALISIS SWOT
STRATEGI BERSAING MENGGUNAKAN ANALISIS SWOT
 
Administrasi Kelompok Tani atau kelompok wanita tani
Administrasi Kelompok Tani  atau kelompok wanita taniAdministrasi Kelompok Tani  atau kelompok wanita tani
Administrasi Kelompok Tani atau kelompok wanita tani
 
Pelembagaan Badan Usaha Milik Desa (BUMDes)ppt
Pelembagaan Badan Usaha Milik Desa (BUMDes)pptPelembagaan Badan Usaha Milik Desa (BUMDes)ppt
Pelembagaan Badan Usaha Milik Desa (BUMDes)ppt
 

Cara membuat web dinamis dengan php mysql part1

  • 1. Untuk memasuki tutorial ini , saya sarankan untu anda agar lebih dahulu membaca Dasar Pembuatan Web Dinamis , ebsof akan menjelaskan tahap demi tahap pembuatan web dinamais, Pada judul tutorial ini yaitu "Membuat Web Dinamis (Bagian 1)" , sesuai judulnya "Bagian 1" , Bahwa ini adalah langkah awal dalam pembuatan website yang mempunyai sistem dinamis, bukan statis. Hal yang harus diperhatikan sebelum memulai pembuatan ialah , Menentukan bentuk dan Jenis serta tujuan Website yang ingin dibuat, Tidak panjang lebar lagi, Kali ini Ebsof akan menjelaskan Tahap demi Tahap Pembuatan Web Portal secara dinamis dengan melibatkan bahasa HTML, PHP, CSS, Java Sript. Berikut Flowchart Web dinamis Yang Ingin Kita buat : Text Editor yang saya gunakan pada Tutorial-tutorial ini : Macromedia Dreamweaver MX , dan Anda Harus sudah menginstal Xampp di komputer anda. Ok Langsung ke TKP : 1. Buat Layout seperti dibawah ini dengan menggunakan table, kemudian simpan dengan nama "index.php" Gambar. 1.1 (Sekema/Layout Website) Gambar di atas merupakan rancangan sekema bentuk website yang ingin kita buat. ada pun properti-nya ialah sebagai berikut : Table Terdiri dari 4 baris dan 2 Kolom Ukuran Table Width = "800 px" Baris Pertama adalah bagian "Header". , Hight = 100 px. (Untuk tinggi Header ini dinamis, artinya terserah berapa nilai yang ingin anda beri. Baris Kedua, Biarkan defult, jangan di rubah-rubah Baris Ketiga . Disini terdapat 2 Kolom. Kolom Pertama adalah Bagian Menu ( Width="200" hight="600") , Kolom Kedua merupakan Bagian Content Website ( Width="600")
  • 2. Baris Ke empat ( bagian Footer website ) , atur ketinggian (Hight="80") ini terserah berapa ukurannya. Jika anda belum mengerti bagaimana cara pembuatan layout di atas, silahkan baca Membuat Website Menggunakan Dremweaver MX Bagian I Berikut script diatas : view plainprint? 1. <!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2. <html> 3. <head> 4. <title>Web Portal Ebsof</title> 5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 6. </head> 7. 8. <body> 9. <table width="800" border="0" align="center" cellpadding="0" cellspacing="0"> 10. <tr bgcolor="#003366"> 11. <td height="100" colspan="2">&nbsp;</td> 12. </tr> 13. <tr bgcolor="#CCFF66"> 14. <td colspan="2">&nbsp;</td> 15. </tr> 16. <tr> 17. <td width="200" height="600" valign="top" bgcolor="#00CCFF">&nbsp;</td> 18. <td valign="top">&nbsp;</td> 19. </tr> 20. <tr bgcolor="#0099FF"> 21. <td height="80" colspan="2">&nbsp;</td> 22. </tr> 23. </table> 24. </body> 25. </html> Untuk hasil dari script di atas dapat dilihat seperti dibawah ini :
  • 3. anda bisa mencopy langsung script diatas, dan simpanlah dengan Nama : "index.php" dan simpanlah di folder Xampp-> Htdocs->buat folder baru di dalam Htdocs, dan simpan file "index.php" didalamnya. Jangan lupa aktifkan terlebih dahulu service Apache dan Mysql Xampp anda terlebih dahulu.. untuk melihat hasilnya di browser anda. Untuk Lanjutan dari Materi Ini.. Bisa di Lihat Pada "Membuat Website Dinamis Bagian II (Membuat Halaman Admin Web Dinamis " Update : Website Dinamis Ini Sudah di Upadate Terus Jika Anda Ingin Melihat Hasil Dari Tutorial-Tutorial Saya Membuat Website Dinamis Langsung aja "Website Dinamis + Source Code + Demo Website " Hanya ada di : http://hasifdiary.blogspot.com/