Cara Membuat Web Dinamis Sederhana(PHP dan Mysql) Bagian 1

Posted by TEKNIK INFORMATIKA on Tuesday, 12 May 2015

Web dinamis adalah website yang mana pengguna (client) bisa merubah konten dari halaman tertentu menggunakan browser dan interaksi yang terjadi antara pengguna dan server sangat kompleks.
Permintaan dari pengguna dapat diproses oleh server yang kemudian ditampilkan dengan isi yang berbeda-berbeda menurut alur programnya. web dinamis memungkinkan anda untuk merubah data melalui halaman admin tanpa harus merubah kodingannya.
untuk membuat web dinamis anda dapat menggunakan bahasa php dan mysql sebagai databasenya..

1. Pertama anda harus mempunyai aplikasi yang bernama xampp yaitu sebagai server yang berdiri sendiri(localhost), anda bisa mendownloadnya di internet, untuk installnya cukup mudah, ikuti saja instruksinya. 



Cara Membuat Web Dinamis Sederhana(PHP dan Mysql) Bagian 1


2.  Setelah anda berhasil menginstal xampp, buka aplikasinya dan start "Apache" dan "Mysql" lalu buka browser anda direkomendasikan Firefox atau Chrome. Lalu Ketikkan localhost/phpmyadmin di address bar untuk mengolah database mysql


Cara Membuat Web Dinamis Sederhana(PHP dan Mysql) Bagian 1


3.  Setelah muncul laman phpmyadmin, pertama anda buat database dengan nama db_web, lalu buat table untuk admin ketikkan kode di bawah ini di tab SQL :
create table admin ( 
username varchar(15) not null primary key,
password varchar(15) not null,
level varchar(15) not null 
)
setelah berhasil di eksekusi, saatnya untuk membuat web yang akan menampilkan databasenya..

4.  untuk membuat web, pertama anda harus membuat homepage terlebih dahulu, buka aplikasi editor seperti notepad atau notepad ++ dll lalu ketik/copas kode di bawah ini dan beri nama file "index.php"

<!DOCTYPE HTML PUBLIC>  
<html>  
<head>  
<title>Kerangka Web</title>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<link href="style.css" rel="stylesheet" type="text/css"> 
</head>  
  
<body>  
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">  
  <tr bgcolor="gray">  
    <td height="100" colspan="2"></td>  
  </tr>  
  <tr bgcolor="black">  
    <td colspan="2"><marquee onmouseover="this.stop()" onmouseout="this.start()" truespeed="true" scrollamount="1" scrolldelay="40" direction="left">  
    <strong><div id="login">Selamat Datang Di Website Kami, Website Ini Masih Dalam Tahap Pembuatan</div></strong>  
</marquee>  


</td>  

  </tr>  
  <tr>  
    <td width="200" height="600" valign="top" bgcolor="gray"><table width="200" border="0" cellspacing="0" cellpadding="0">  
      <tr>  
        <td><form name="form1" method="post" action="cek_login.php">  
          <table width="200" border="0" cellspacing="0" cellpadding="2">  
            <tr bgcolor="#003366">  
              <td height="30" colspan="2"><div align="center"><div id="login"><strong>Login Admin </strong></div></div></td>  
              </tr>  
            <tr>  
              <td width="74" height="30"><b>Username</b></td>  
              <td width="126">:   
                <input name="username" type="text" id="username" size="10"></td>  
            </tr>  
            <tr>  
              <td height="30"><b>Password</b></td>  
              <td>:   
                <input name="password" type="password" id="password" size="10"></td>  
            </tr>  
            <tr>  
              <td height="30">&nbsp;</td>  
              <td><input type="submit" name="Submit" value="Login"></td> 
            </tr>  
          </table>  
        </form>
       </td>  
      </tr>  
      <tr>  
        <td><div id="kiri">
<div id="login">
<p><center><b>PROFIL</center></p> 
<p>Nama : Banu Ari Ramadhan </p>
<p>Web   : banuaril10.blogspot.com</p></b>
</div>
</div>
</td>  
      </tr>  
    </table> 
</td>   
    <td valign="top">&nbsp;</td>  
  </tr>  
  <tr bgcolor="black">  
    <td height="80" colspan="2"><div id="login"><center>Copyright 2015 <br>Design : Banu Ari Ramadhan</div></td>  
  </tr>  
</table>  
</body>  
</html>  
5.  Untuk membuat tampilan web terlihat bagus, buat desain css untuk web tersebut buat file bernama "style.css" lalu ketik/copas kode di bawah ini :
#kiri { font-size:12px; border-radius:5px;border:6px;height:120px; padding:10px;background-color:black;float:left;width:165px; margin-top:40px;margin-left:8px;}  
#login{color:white; }

penjelasan :
#kiri adalah untuk desain web bagian kiri
#login adalah untuk desain tulisan pada form login


6.  untuk melihat hasilnya simpan file "index.php" dan "style.css" pada C:>/xampp/htdocs/web(buat folder baru bernama web) lalu jalankan melalui address bar browser anda dengan mengetikan : localhost/web/index.php 

lalu lihat hasilnya.. 

anda sudah membuat homepage sederhana untuk data yang akan di tampilkan nanti..
bagian selanjutnya saya akan posting cara membuat koneksi untuk membuat halaman admin 

note : jangan lupa aktifkan xampp anda (start Apache dan Mysql)

untuk tutorial yang lebih lengkap seperti bagaimana cara instalasi XAMPP, memperbaiki error pada port, melakukan setting pada database dan cara instalasi WordPress, agan2 dapat mengunjungi website berikut Cara menggunakan XAMPP 
jika ada kekurangan silahkan saran dan kritik di komentar..
Terima kasih sudah berkunjung :)


untuk download script lengkapnya dari part 1 sampai 5 silahkan klik link di bawah sini

DOWNLOAD 

Jika ingin konsultasi masalah pemograman php, javascript dll, boleh hubungi nomor : 088211832975 

Blog, Updated at: 05:36

43 komentar:

  1. makasih gan,, sangat membantu

    ReplyDelete
  2. artikel yang bisa dengan mudah dipahami gan, penjelasannya padat dan jelas,,, salam dari kami blog sedot code, semoga agan bisa berkonstribusi kedalam blog kami, ini ada sebuah aplikasi sekolah sederhana yang saya buat sendiri, terima kasih atas beberrapa potongan source code dari blog mas gan banuari

    ReplyDelete
    Replies
    1. oke sama-sama gan, ane juga sudah berkunjung ke blog agan, thanks kunjungannya gan (y)

      Delete
  3. bagus gan
    ttip juga dong gan skripindo15.blogspot.com

    ReplyDelete
  4. matur tengkiyu ilmunya mas
    semoga sampean bisa terus buat artikel yg bermanfaat yaa..

    ReplyDelete
  5. Maaf Gan Pemilik : banuaril10.blogspot.co.id,
    numpang pamer llmu ya,,,

    aGan2 permirsa banuaril10.blogspot.co.id, mari-mari cek cara membuat website dinamis dengan URL bersih / clean URL / Pretty URL… cek langsung kalo suka:

    Artikel :
    http://www.asanoer.com/artikel/asanoer-com-pretty-url-lanjutan.html

    Demo :
    http://demo.asanoer.com/pretty-url-2

    Terima kasih Gan….

    asanoer.com

    ReplyDelete
  6. Gan apakah benar pakai XAMPP versi terbaru tidak bisa?

    ReplyDelete
  7. Keren banget gan..
    penjelasan mudah di mengerttiii...

    ReplyDelete
  8. cek_login.php nya kok nggak kkk buat, nggak seru

    ReplyDelete
  9. wah membantu sekali. ditunggu kak postingan selanjutnya

    ReplyDelete
  10. terima kasih buat materinya..
    sangat bermanfaat.

    ReplyDelete
  11. http://localhost/web/index.php
    username dan password yg di masukkan apa ya gan ???

    ReplyDelete
    Replies
    1. cek di sini gan http://banuaril10.blogspot.co.id/2015/07/cara-membuat-web-dinamis.html

      Delete
  12. sangat membantu dan artikel nya juga mudah dipahami,,,

    ReplyDelete
  13. gan tolong kirim koding lengkap nya ke edotelok12@gmail.com
    thx gan

    ReplyDelete
  14. This comment has been removed by a blog administrator.

    ReplyDelete
  15. This comment has been removed by a blog administrator.

    ReplyDelete
  16. terimakasih banyak artikelnya sangat berguna..
    My blog

    ReplyDelete
  17. hai kak banu,
    thanks banget yaa,
    maaf nie,q masih copas copas file mu,soalnya q masih tahap blajar

    ReplyDelete
  18. Error 404

    localhost
    Apache/2.4.7 (Win32) OpenSSL/1.0.1e PHP/5.5.6

    ReplyDelete
  19. Bagus ini mas, kususnya buat mereka yang masih belajar... terima dan kasih :)

    ReplyDelete
  20. artikel yang bisa dengan mudah dipahami
    My blog

    ReplyDelete
  21. sangat mudah dipahami trimaksih sudah berbagi
    dwi ayu lestari

    ReplyDelete
  22. klo copas diedit juga gan kasian yg udh ngoding wkkwkwkwk

    ReplyDelete
  23. sangat bermamfaat sekali ka, semoga ada lanjutannya lagi tentang membuat website yang lebih rumit, samgat membantu saya untuk belajar

    ReplyDelete
  24. gan... sedikit saran dari saya --> bikin blog yang lebih membahas cara desainny a boleh kali :')

    ReplyDelete
  25. sangat membantu dan artikel nya juga mudah dipahami. jadi bertambah lagi nih ilmu saya. Makasih Gan.......
    kunjungi juga website kampus sy http://www.atmaluhur.ac.id

    ReplyDelete
  26. gan kalau qta ad yang kelangkah ngetik nieh,misalnya kata password lupa ngetik,,nah cara untuk nambihin kata password itu gimana,,,,makasih kan,,,

    jangan lupa kunjungin website saya :https://nurrizkiana.mahasiswa.atmaluhur.ac.id
    website kampus saya : http://www.atmaluhur.ac.id//

    ReplyDelete
  27. Artikel ini membahas Web dinamis yaitu website yang pengguna (client) bisa merubah konten dari halaman tertentu pake browser dan interaksi antara pengguna dan server kompleks, dapat menggunakanbahasa php dan mysql sebagai databasenya.Terimakasih informasinya,sukses selalu. Website saya https://sriseptiarini.mahasiswa.atmaluhur.ac.id
    Website Kampus http://www.atmaluhur.ac.id

    ReplyDelete
  28. donload part selanjutny gmne gan?

    ReplyDelete

Search This Blog

Follow This Blog

Total Pageviews