Cara membuat website dengan php dan css

Menggunakan PHP dan MySQL

SALSABILA BASALAMAH

Web adalah aplikasi yang disimpan dan dieksekusi di lingkungan web server. Setiap permintaan yang dilakukan oleh user melalui aplikasi klien (web browser) akan direspon oleh aplikasi web dan hasilnya akan dikembalikan lagi ke hadapan user.

Bagaimana Cara Membangun Web?

Dalam membangun sebuah web kita membutuhkan kerja sama antara PHP, Apache, dan MySQL.

• PHP ketika dipanggil dari web browser, program yang ditulis dengan PHP akan di-parsing di dalam web server oleh interpreter PHP dan diterjemahkan ke dalam dokumen HTML, yang selanjutnya akan ditampilkan kembali ke web browser. Karena pemrosesan program PHP dilakukan di lingkungan web server, PHP dikatakan sebagai bahasa sisi server (server-side). Dengan kata yang lebih sederhana PHP adalah bahasa script atau kode yang digunakan untuk mengkoneksikan ke database.
• Salah satu Web server yang bersifat open source atau masih bersifat lokal (didalam pc) adalah Apache. Ketika seseorang hendak mengakses suatu website, ia harus memasukkan nama domain ke kolom alamat pada browser. Setelah itu, web server akan mengirimkan file yang diminta. Dalam hal ini, server berperan sebagai pengirim virtual. Sehingga, web server adalah sebuah server yang memberikan layanan berbasis data dan berfungsi menerima permintaan dari HTTP atau HTTPS.
• MySQL merupakan sebuah perangkat lunak /software sistem manajemen basis data SQL atau DBMS Multithread dan multi user. MySQL sebenarnya merupakan turunan dari salah satu konsep utama dalam database untuk pemilihan atau seleksi dan pemasukan data yang memungkinkan pengoperasian data dikerjakan secara mudah dan otomatis. Sehingga, MySQL adalah tempat penampungan inputan yang berasal dari web server.

Perlu diingat bahwa MySQL dan Apache merupakan software yang berbeda dan tidak saling berkaitan serta dikembangkan oleh vendor yang berbeda. Cara cepat yang dapat digunakan untuk memasang atau mengaktifkan PHP dan Apache adalah dengan menggunakan XAMPP.

Pembuatan Web

Kali ini kita akan membuat salah satu contoh web yang menampilkan data dari database. Kita akan membuat sebuah tampilan data buku dimana nantinya data buku dapat dicari dan sort berdasarkan variabel data. Tabel yang akan dibuat mengunakan data tables dan tampilan web akan ditambah dengan menggunakan css dan javascript. Tabel yang akan dibuat terdiri dari beberapa variabel atau field serta tipe data sebagai berikut:

• Id dengan menggunakan type data Integer
• Penulis dengan menggunakan type data Varchar
• Penerbit dengan menggunakan type data Varchar

Integer adalah tipe data yang mempresentasikan bilangan bulat.

Langkah pertama adalah mengaktifkan Apache dan MySQL menggunakan XAMPP.

Selanjutnya membuat database, pembuat database berada di localhost. Database yang akan dibuat bernama buku dan nama tabel penulis.

Setelah membuat database, selanjutnya menyusun kode-kode untuk membangun web. File php pertama yang dibuat adalah index.php. Dalam file index.php terdiri dari:

<!-- kode php --><?php 
include 'koneksi.php';
?>

Kode diatas merupakan tag dalam php, perintah atau tag include untuk memanggil koneksi database dimana database akan dikoneksikan menggunakan kode-kode yang berada dalam file koneksi.php.

<!-- Kode header atau judulnya -->
<h3>Form Pencarian</h3><!-- kode cdn--><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">  

Kode diatas merupakan kode yang terdiri dari judul dan cdn. cdn digunakan untuk manggil kodingan secara online, kali ini penulis akan memanggil koding css. css adalah terdiri dari kode-kode untuk mempercantik tampilan suatu web. Untuk link pertama merupakan css untuk data tabel dan untuk link kedua merupakan css untuk data bootstrap.

Bootstrap adalah sebuah library frame work css yang dibuat kusus untuk pengembangan website.

Langkah berikutnya adalah membuat tabel, dalam pembuatan tabel dimulai dari pemubuatan kepala tabel, untuk membuat tabel dimulai dengan tag <table> dan diakhiri </table>.

<!-- membuat tabel dan kepala tabel--><table id="myTable" class="display"> 
 <thead> 
  <tr>
   <th>No</th> 
   <th>Penulis</th>
   <th>Penerbit</th>
  </tr>
 </thead>

Keterangan tag yang digunakan pada kode diatas sebagai berikut:

• <thead> digunakan untuk memulai menuliskan kepala tabel
• <tr> adalah tabel row untuk membuat baris baru
• <th> tag ini digunakan untuk penamaan variabel pada kepala tabel

Setelah membuat kepala tabel dan menutup kepala tabel dengan </tag> selanjutnya pembuatan badan tabel. Pembuatan badan tabel menggunakan tag <tbody> dan menutup dengan <tbody> .

<!-- kode badan tabel--><tbody> 
 <?php 
 $no = 1;
 $data = $kon->query("SELECT * FROM penulis");
 foreach ($data as $d) {
  ?>
  <tr> 
   <td><?php echo $no++; ?></td> 
   <td><?php echo $d['penulis']; ?></td>
   <td><?php echo $d['penerbit']; ?></td>
  </tr>
 <?php } ?>
 </tbody>
</table>

Keterangan tag yang digunakan pada kode badan tabel diatas sebagai berikut:

• <td> digunakan untuk memasukkan data
• query("SELECT * FROM penulis”)artinya memberikan perintah (query) untuk mengambil semua kolom yang ada ditabel penulis.

<!-- kode script --><script 
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
 $(document).ready( function () {
  $('#myTable').DataTable();
 } );
</script>

Kode diatas adalah kode terakhir yang ada didalam file index.php. Kode ini merupakan kode script. Script adalah untuk membuka tag javascript. Kemudian kode $('#myTable') ini fungsi untuk memanggil (excute) data tabel.

File kedua yang dibuat adalah file koneksi.php. Kode dalam koneksi.php sebagai berikut.

<!-- kode koneksi.php--><?php
$kon = mysqli_connect('localhost','root','');
$link = mysqli_select_db($kon,"buku") or die(mysqli_error());
?>

Pada kode diatas menunjukan perintah $kon adalah untuk memisalkan bahwa “mysqli_connect(‘localhost’,’root’,’’)” adalah $kon . Untuk perintah mysqli_connect digunakan untuk menghubungkan ke server web. Sedangkan, mysqli_select_db digunakan untuk menghubungkan koneksi ke database. Hasil dari kode-kode pada file index.php dan koneksi.php beserta database yang dibuat menghasilkan tampilan web sebagai berikut:

Untuk penambahan data pada web dapat penulis lakukan dengan menambah pada database.

Langkah langkah membuat website dengan PHP?

Langkah langkah membuat website HTML dan CSS?

Apa itu PHP website?

Bagaimana cara membuat website sendiri?