SlideShare a Scribd company logo
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/

More Related Content

What's hot

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
 

What's hot (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 to 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 to 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
 

Recently uploaded

17837355 pemantauan dan pengendalian.ppt
17837355 pemantauan dan pengendalian.ppt17837355 pemantauan dan pengendalian.ppt
17837355 pemantauan dan pengendalian.ppt
aciambarwati
 
Strategi pemasaran dalam bisnis ritel diperusahaan
Strategi pemasaran dalam bisnis ritel diperusahaanStrategi pemasaran dalam bisnis ritel diperusahaan
Strategi pemasaran dalam bisnis ritel diperusahaan
fatamorganareborn88
 
PERTEMUAN 1 ; PENGANTAR DIGITAL MARKETING PERTANIAN.pptx
PERTEMUAN 1 ; PENGANTAR DIGITAL MARKETING PERTANIAN.pptxPERTEMUAN 1 ; PENGANTAR DIGITAL MARKETING PERTANIAN.pptx
PERTEMUAN 1 ; PENGANTAR DIGITAL MARKETING PERTANIAN.pptx
AzisahAchmad
 
SUNDABET DAFTAR SLOT ONLINE GACOR MAXWIN
SUNDABET DAFTAR SLOT ONLINE GACOR MAXWINSUNDABET DAFTAR SLOT ONLINE GACOR MAXWIN
SUNDABET DAFTAR SLOT ONLINE GACOR MAXWIN
SUNDABET
 
POWER POIN MATERI KELAS XI BAB IV (3).pptx
POWER POIN MATERI KELAS XI BAB IV (3).pptxPOWER POIN MATERI KELAS XI BAB IV (3).pptx
POWER POIN MATERI KELAS XI BAB IV (3).pptx
EchaNox
 
ppt metodologi penelitian bisnis digital Al faiz
ppt metodologi penelitian bisnis digital Al faizppt metodologi penelitian bisnis digital Al faiz
ppt metodologi penelitian bisnis digital Al faiz
Alfaiz21
 

Recently uploaded (19)

pph pasal 4 ayat 2 belajar ( pph Final ).ppt
pph pasal 4 ayat 2  belajar ( pph Final ).pptpph pasal 4 ayat 2  belajar ( pph Final ).ppt
pph pasal 4 ayat 2 belajar ( pph Final ).ppt
 
studi kelayakan bisnis (desaian studi kelayakan).ppt
studi kelayakan bisnis (desaian studi kelayakan).pptstudi kelayakan bisnis (desaian studi kelayakan).ppt
studi kelayakan bisnis (desaian studi kelayakan).ppt
 
PPT METODOLOGI PENELITIAN BISNIS DIGITAL SUTAN MAULANA
PPT METODOLOGI PENELITIAN BISNIS DIGITAL SUTAN MAULANAPPT METODOLOGI PENELITIAN BISNIS DIGITAL SUTAN MAULANA
PPT METODOLOGI PENELITIAN BISNIS DIGITAL SUTAN MAULANA
 
Materi Pemasaran Internasional dan Pemasaran Global
Materi Pemasaran Internasional dan Pemasaran GlobalMateri Pemasaran Internasional dan Pemasaran Global
Materi Pemasaran Internasional dan Pemasaran Global
 
Materi Pemasaran Kelas 11 kurikulum merdeka
Materi Pemasaran Kelas 11 kurikulum merdekaMateri Pemasaran Kelas 11 kurikulum merdeka
Materi Pemasaran Kelas 11 kurikulum merdeka
 
17837355 pemantauan dan pengendalian.ppt
17837355 pemantauan dan pengendalian.ppt17837355 pemantauan dan pengendalian.ppt
17837355 pemantauan dan pengendalian.ppt
 
kinerja penyusunan anggaran organisasi yang baik
kinerja penyusunan anggaran organisasi yang baikkinerja penyusunan anggaran organisasi yang baik
kinerja penyusunan anggaran organisasi yang baik
 
PPT METODOLOGI PENELITIAN IKHSAN MAULANA.pdf
PPT METODOLOGI PENELITIAN IKHSAN MAULANA.pdfPPT METODOLOGI PENELITIAN IKHSAN MAULANA.pdf
PPT METODOLOGI PENELITIAN IKHSAN MAULANA.pdf
 
Strategi pemasaran dalam bisnis ritel diperusahaan
Strategi pemasaran dalam bisnis ritel diperusahaanStrategi pemasaran dalam bisnis ritel diperusahaan
Strategi pemasaran dalam bisnis ritel diperusahaan
 
PPT BIMTEK STRATEGI PEMBELAJARAN EFEKTIF.pptx
PPT BIMTEK STRATEGI PEMBELAJARAN EFEKTIF.pptxPPT BIMTEK STRATEGI PEMBELAJARAN EFEKTIF.pptx
PPT BIMTEK STRATEGI PEMBELAJARAN EFEKTIF.pptx
 
PERTEMUAN 1 ; PENGANTAR DIGITAL MARKETING PERTANIAN.pptx
PERTEMUAN 1 ; PENGANTAR DIGITAL MARKETING PERTANIAN.pptxPERTEMUAN 1 ; PENGANTAR DIGITAL MARKETING PERTANIAN.pptx
PERTEMUAN 1 ; PENGANTAR DIGITAL MARKETING PERTANIAN.pptx
 
bab 4 motivasi dalam matpen perilaku organisasi
bab 4 motivasi dalam matpen perilaku organisasibab 4 motivasi dalam matpen perilaku organisasi
bab 4 motivasi dalam matpen perilaku organisasi
 
SUNDABET DAFTAR SLOT ONLINE GACOR MAXWIN
SUNDABET DAFTAR SLOT ONLINE GACOR MAXWINSUNDABET DAFTAR SLOT ONLINE GACOR MAXWIN
SUNDABET DAFTAR SLOT ONLINE GACOR MAXWIN
 
POWER POIN MATERI KELAS XI BAB IV (3).pptx
POWER POIN MATERI KELAS XI BAB IV (3).pptxPOWER POIN MATERI KELAS XI BAB IV (3).pptx
POWER POIN MATERI KELAS XI BAB IV (3).pptx
 
ppt metodologi penelitian bisnis digital Al faiz
ppt metodologi penelitian bisnis digital Al faizppt metodologi penelitian bisnis digital Al faiz
ppt metodologi penelitian bisnis digital Al faiz
 
PPT METODOLOGI PENELITIAN MUHAMMAD IQBAL.pdf
PPT METODOLOGI PENELITIAN MUHAMMAD IQBAL.pdfPPT METODOLOGI PENELITIAN MUHAMMAD IQBAL.pdf
PPT METODOLOGI PENELITIAN MUHAMMAD IQBAL.pdf
 
Grass Block Untuk Carport Pengiriman ke Klojen
Grass Block Untuk Carport Pengiriman ke KlojenGrass Block Untuk Carport Pengiriman ke Klojen
Grass Block Untuk Carport Pengiriman ke Klojen
 
AUDIT II KELOMPOK 9_indrioktuvianii.pptx
AUDIT II KELOMPOK 9_indrioktuvianii.pptxAUDIT II KELOMPOK 9_indrioktuvianii.pptx
AUDIT II KELOMPOK 9_indrioktuvianii.pptx
 
PENGARUH PERCEIVED USEFULNESS, PERCEIVED EASE OF USE, DAN PERCEIVED RISK TERH...
PENGARUH PERCEIVED USEFULNESS, PERCEIVED EASE OF USE, DAN PERCEIVED RISK TERH...PENGARUH PERCEIVED USEFULNESS, PERCEIVED EASE OF USE, DAN PERCEIVED RISK TERH...
PENGARUH PERCEIVED USEFULNESS, PERCEIVED EASE OF USE, DAN PERCEIVED RISK TERH...
 

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/