Pilih Laman

sumber : https://www.adityasubawa.com/membuat-website-professional-dengan-php-mysql-part-2

Selamat Malam, setelah posting saya sebelumnya Membuat Website Professional dengan PHP & MySql – PART #1 yang mana hanya membahas pengertian dasar dan keuntungan jika anda memiliki website. Maka posting kali ini saya akan membahas tentang web server pada komputer/laptop dan mempersiapkan HTML untuk frontend.

#1 Web Server

  1. Download XAMPP disini dan pilihlah sesuai dengan komputer/laptop anda.
  2. Instalasi/petunjuk dapat anda jelajahi disini.
  3. Saya tidak akan menjabarkan cara instalasi XAMPP, silahkan anda search sesuai dengan komputer/laptop anda masing2.
  4. Setelah terinstall dan untuk Pengguna MAC, klik atau cari pada Launchpad “Manager-OSX
  5. Klik Go To Application kemudian Start Servers

#2 Struktur Folder

 

 

  1. Dalam Folder “htdocs” buatlah folder baru dengan nama “hospital”
  2. Dalam Folder “hospital” buatlah beberapa folder baru dengan nama “admin”, “config”, “css”, “js” dan “images”, sehingga struktur folder terlihat seperti pada gambar dibawah:
  3. Jika sudah, Selanjutnya kita akan membuat halaman awal website atau kita menyebutnya halaman frontend. Jika anda akses pada web browser “http://localhost/hospital” pastikan folder yang anda buat tadi tampil pada browser anda seperti pada gambar dibawah: 

#3 Frontend

  • Langkah Selanjutnya adalah menyiapkan sebuah file HTML untuk halaman frontend.
  • Buka Text Editor anda, buatlah sebuah file HTML kemudian beri nama index.html. Disini saya menggunakan Adobe Dreamweaver.
  • Copy dan paste kode HTML berikut di text editor index.html:
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Suba Hospital</title>
      <meta name="description" content="Rumah Sakit terlengkap dan termewah sejagat raya.">
      <meta name="author" content="Aditya Subawa">
    
      <link rel="stylesheet" href="css/styles.css">
    </head>
    
    <body>
      <h2>Suba Hospital</h2>
      <p>Clinical excellence must be the priority for any health care service provider.</p>
    </body>
    </html>​
  • Simpan file index.html dalam folder hospital sejajar dengan folder admin, css, js…
  • Kita akan bahas “men-design” halaman frontend di posting selanjutnya, saatnya anda membuat koneksi database dan halaman admin terlebih dahulu.

#4. Database

Anda akan menyiapkan koneksi dari website ke database, sebelum memulainya anda harus membuat sebuah database terlebih dahulu, lengkap dengan tabelnya.

  1. Buka http://localhost/phpmyadmin pada browser.
  2. Klik New, kemudian isi nama database “hospital” kemudian klik Create 
  3. Isi nama tabel dengan nama “user” isi column dengan jumlah 4 (id, username, password dan email)
  4. buatlah column dengan detail sebagai berikut: id bertipe data int, sedangkan username dan password bertipe data varchar dan beri nilai 50. jangan lupa mencentang auto_increment dan pilih primary pada id. karena kita akan menjadikan id sebagai primary keyemail bertipe data varchar dan beri nilai 100. 
  5. Kemudian Klik Save.

Sekian Tutorial lanjutan dari saya, anda sudah membuat struktur folder, membuat halaman index.html dan membuat database. Dasar/pondasi sudah dibuat, tunggu posting saya selanjutnya. Stay Strong & Healthy.