Selasa, 04 Februari 2025

Membuat Halaman Index.php dan Config.php Aplikasi To Do List

 Apa itu index.php?

index.php adalah file utama yang digunakan sebagai entri utama untuk aplikasi web berbasis PHP.

Fungsi

  • Menginisialisasi aplikasi
  • Menangani permintaan HTTP
  • Menghubungkan ke database
  • Menampilkan konten ke pengguna
Apa ITU PHP
PHP (Hypertext Preprocessor) adalah bahasa pemrograman yang banyak digunakan untuk pengembangan web. Berikut adalah jenis-jenis PHP yang sering digunakan:

1. **PHP Native**
   - Digunakan untuk pengembangan aplikasi web tanpa framework atau CMS. Cocok untuk proyek kecil dan sederhana.

2. **PHP Framework**
   - Framework yang populer untuk membantu pengembangan aplikasi web, termasuk:
     - **Laravel**: Dikenal karena sintaksis yang elegan dan banyak fitur built-in.
     - **CodeIgniter**: Ringan dan mudah digunakan, cocok untuk pemula.
     - **Symfony**: Framework yang kuat dengan komponen yang dapat digunakan kembali.
     - **CakePHP**: Memudahkan pengembangan aplikasi berbasis MVC.
     - **Yii**: Menawarkan performa tinggi dan banyak fitur.

3. **Content Management Systems (CMS)**
   - Platform berbasis PHP yang memudahkan pembuatan dan pengelolaan konten:
     - **WordPress**: Salah satu CMS terpopuler di dunia.
     - **Joomla**: Fleksibel dan dapat digunakan untuk berbagai jenis website.
     - **Drupal**: Cocok untuk website yang lebih kompleks dan konten yang banyak.

 4. **PHP E-commerce Platforms**
   - Digunakan untuk membangun situs e-commerce:
     - **Magento**: Solusi e-commerce yang kuat dan dapat disesuaikan.
     - **WooCommerce**: Plugin e-commerce untuk WordPress.
     - **OpenCart**: Solusi e-commerce sederhana dan mudah digunakan.

 Penemu PHP
- **Rasmus Lerdorf**: Rasmus adalah seorang programmer asal Denmark yang menciptakan PHP pada tahun 1993. Awalnya, PHP adalah singkatan dari "Personal Home Page". Seiring perkembangan waktu, PHP berkembang menjadi salah satu bahasa pemrograman yang paling populer untuk pengembangan web.

BOOTSRAPS

Bootstraps adalah salah satu framework terpopuler dalam pemrograman web menggunakan bahasa Python. Namun, jika Anda berbicara tentang framework Bootstraps, saya akan membahas tentang Bootstrap.

Bootstrap adalah sebuah framework CSS, HTML, dan JavaScript yang dapat membantu Anda menciptakan desain responsif dengan cepat dan mudah. Framework ini dikembangkan oleh Twitter dan kemudian dijadikan sebagai Open Source pada tahun 2011. Bootstrap memungkinkan Anda untuk membuat desain yang konsisten dan responsif dengan menggunakan komponen-komponen predesain yang dapat disesuaikan.

Kelebihan Bootstrap

  1. Responsif: Bootstrap dapat menyesuaikan desain Anda untuk perangkat berbeda (desktop, tablet, smartphone).
  2. Mudah digunakan: Bootstrap memiliki antarmuka yang sederhana dan mudah dimengerti.
  3. Konsisten: Bootstrap menyediakan predesain yang konsisten pada komponen-komponen.
  4. Cepat: Bootstrap memungkinkan Anda untuk menciptakan desain dengan cepat tanpa perlu membuat dari awal.

Kemampuan Bootstrap

  1. Layout: Bootstrap menyediakan komponen-komponen layout seperti card, grid, dan modal.
  2. Komponen: Bootstrap memiliki komponen-komponen seperti navbar, breadcrumb, dan dropdown.
  3. Form: Bootstrap menyediakan komponen-komponen form seperti input, select, dan textarea.
  4. Media: Bootstrap memungkinkan Anda untuk menampilkan media seperti gambar dan video.

Cara Menggunakan Bootstrap

  1. Unduh Bootstrap: Unduh Bootstrap dari situs resmi Bootstrap.
  2. Inklusikan Bootstrap: Tambahkan Bootstrap ke proyek Anda dengan mengganti tautan CSS dan JavaScript Bootstrap.
  3. Gunakan Komponen: Gunakan komponen Bootstrap dalam kode HtmL Anda.

MEMBUAT FOLDER TODOLIST

: C/XAMPP/htdoct/nama folder

pastikan membuat folder aplikasi lokal didalam folder htdoct


MEMBUAT HALAMAN index.php

setelah membuat folder temen-temen memiliki aplikasi Sublime text, Visual code atau dreamwever berikut link download aplikasinya:
https://www.sublimetext.com/download
https://code.visualstudio.com/download
http://www.oldversion.com/windows/macromedia-dreamweaver-8


selanjutnya kita akan langsung menggunakan framework bootstrap 5 
https://getbootstrap.com/docs/5.3/getting-started/introduction/


<title>To Do List</title>
<title> dalam halaman HTML digunakan untuk mendefinisikan judul dari dokumen HTML. Judul ini muncul di beberapa tempat, terutama di bagian atas jendela atau tab browser, dan juga merupakan informasi penting yang ditampilkan pada hasil pencarian mesin pencari.

<h1></h1>
digunakan untuk menandai judul tingkat pertama dalam sebuah halaman web. Elemen ini merupakan bagian dari struktur heading yang terdiri dari enam tingkat, yaitu <h1> hingga <h6>.

MARI KITA MULAI💪💪

1. Include Bootstrap’s CSS and JS.


2. components Navbar/#Nav
komponen navbar bisa diambil dilaman framework bootstrap v5 : https://getbootstrap.com/docs/5.3/components/navbar/#nav
kemudian untuk output yang diinginkan bisa disesuaikan pada gambar dibawah ini
input navbar
<div class> adalah elemen HTML yang digunakan untuk mengelompokkan konten dalam dokumen HTML. Elemen <div> sendiri adalah singkatan dari "division". Dengan menambahkan atribut class, Anda dapat memberikan identifikasi atau kategori tertentu pada div tersebut, yang dapat digunakan untuk styling dengan CSS atau untuk tujuan pengelompokan dalam JavaScript.

tampilkan output navbar seperti gambar ini:

3. Konten
container-fluid
adalah sebuah kelas CSS yang digunakan dalam framework Bootstrap untuk membuat kontainer yang fleksibel dan dapat menyesuaikan dengan ukuran layar.

berikut sourcode laman konten
<!--Content-->
    <div  class="container-fluid">
      <div class="row d-flex justify-content-center mt-3" style="min-height: 400px;">
        <div class="col-md-10 p-4 rounded-2">
           <?php
            if ($_GET['halaman']=='home') {
              include"home/home.php";
            }
            else if ($_GET['halaman']=='todo') {
              include"todo/todo.php";
            }
            else if ($_GET['halaman']=='edit_todolist') {
              include"todo/edit_todolist.php";
              echo "";
            }
            ?>
        </div>
      </div>
    </div>
   
    <!--Content-->
  • Menggunakan Dengan row dan col:

    • Untuk membuat struktur kontainer yang lebih kompleks, Anda dapat menggunakan row dan col bersama dengan container-fluidrow adalah elemen yang digunakan untuk membuat baris yang dapat berisi beberapa col, sedangkan col adalah kelas yang digunakan untuk membuat kolom di dalam row.
contoh : 
<div class="container-fluid">
  <h1>Kontainer Fleksibel</h1>
  <div class="row">
    <div class="col-md-4">Kolom 1</div>
    <div class="col-md-4">Kolom 2</div>
    <div class="col-md-4">Kolom 3</div>
  </div>
</div>

berikut penjelsan koding PHP Native
Koding PHP ini adalah contoh dari penggunaan kondisi `if-else` untuk mengarahkan pengguna ke halaman yang berbeda berdasarkan nilai parameter `halaman` yang dikirim melalui URL menggunakan metode `GET`.

Berikut adalah penjelasan lebih rinci:

1. **Mengambil Nilai Parameter `halaman`**:
   - `$_GET['halaman']` digunakan untuk mengambil nilai parameter `halaman` dari URL. Contohnya, jika URL adalah `http://example.com/index.php?halaman=home`, maka `$_GET['halaman']` akan mengembalikan nilai `home`.

2. **Kondisi `if-else`**:
   - Kodingan menggunakan struktur kondisi `if-else` untuk menentukan halaman mana yang harus ditampilkan berdasarkan nilai `halaman`.
   - Jika `$_GET['halaman']` sama dengan `home`, maka include `home/home.php`.
   - Jika `$_GET['halaman']` sama dengan `todo`, maka include `todo/todo.php`.
   - Jika `$_GET['halaman']` sama dengan `edit_todolist`, maka include `todo/edit_todolist.php`.

3. **Include Halaman**:
   - `include` digunakan untuk memasukkan konten dari file PHP lain ke dalam skrip yang sedang dijalankan.
   - Misalnya, jika pengguna mengakses `http://example.com/index.php?halaman=home`, maka konten dari `home/home.php` akan ditampilkan.

4. **Penggunaan `echo`**:
   - Pada kondisi `else if ($_GET['halaman']=='edit_todolist')`, ada pernyataan `echo "";` yang tidak melakukan apa-apa karena tidak ada string yang di-echo. Baris ini mungkin sisa kode yang tidak perlu dan bisa dihilangkan.

### Contoh Penggunaan:

Untuk mengakses halaman `home`, URL yang digunakan bisa seperti ini:
```
http://example.com/index.php?halaman=home
```
Untuk mengakses halaman `todo`, URL yang digunakan bisa seperti ini:
```
http://example.com/index.php?halaman=todo
```
Untuk mengakses halaman `edit_todolist`, URL yang digunakan bisa seperti ini:
```
http://example.com/index.php?halaman=edit_todolist
```

### Peringatan Keamanan:

- Menggunakan `include` dengan path yang dinamis berdasarkan input pengguna (seperti `$_GET['halaman']`) dapat membuka kerentanan keamanan jika tidak ditangani dengan benar, karena bisa digunakan untuk melakukan serangan seperti Local File Inclusion (LFI) atau Remote File Inclusion (RFI).
- Pastikan untuk memvalidasi dan memfilter input pengguna sebelum menggunakannya untuk mengarahkan ke halaman tertentu.

Membuat config.php 

config.php adalah sebuah file dalam aplikasi web yang umumnya digunakan untuk menyimpan pengaturan atau konfigurasi aplikasi.

<?php

$mysqli=mysqli_connect('localhost','root','','ukktodo');

mysqli_select_db($mysqli,'ukktodo') or die("database tidak ditemukan");

?>   

 


Koding PHP yang Anda berikan bertujuan untuk melakukan koneksi ke basis data MySQL menggunakan ekstensi MySQLi (MySQL Improved). Mari kita uraikan kode tersebut baris demi baris:

Penjelasan Kode

```php
$mysqli = mysqli_connect('localhost', 'root', '', 'ukktodo');
```

1. **`mysqli_connect`**: Ini adalah fungsi yang digunakan untuk membuat koneksi ke server basis data MySQL.
   - **Parameter 1**: `'localhost'`: Ini adalah alamat server basis data. `'localhost'` berarti server basis data berjalan di mesin yang sama dengan server web (misalnya, XAMPP, WAMP, atau server lokal lainnya).
   - **Parameter 2**: `'root'`: Ini adalah nama pengguna untuk mengakses database. `root` adalah nama pengguna default di banyak instalasi MySQL, tetapi ini bisa berbeda tergantung pada konfigurasi.
   - **Parameter 3**: `''`: Ini adalah kata sandi untuk pengguna database. Dalam contoh ini, tidak ada kata sandi yang diatur untuk pengguna `root`. (Namun, sebaiknya selalu gunakan kata sandi yang kuat untuk keamanan).
   - **Parameter 4**: `'ukktodo'`: Ini adalah nama basis data yang ingin diakses.

Jika koneksi berhasil, variabel `$mysqli` akan menjadi objek koneksi, dan jika gagal, ia akan menjadi `false`.

```php
mysqli_select_db($mysqli, 'ukktodo') or die("database tidak ditemukan");
```

2. **`mysqli_select_db`**: Fungsi ini digunakan untuk memilih basis data yang akan digunakan untuk query selanjutnya.
   - **Parameter 1**: `$mysqli`: Ini adalah objek koneksi yang baru saja dibuat.
   - **Parameter 2**: `'ukktodo'`: Ini adalah nama basis data yang ingin dipilih.

3. **`or die("database tidak ditemukan")`**: Ini adalah cara untuk menangani kesalahan:
   - Jika pemilihan basis data gagal (misalnya, jika basis data `ukktodo` tidak ada), maka skrip akan menghentikan eksekusi dan menampilkan pesan "database tidak ditemukan".

### Hasil Akhir:

- **Koneksi Berhasil**: Jika koneksi berhasil dan basis data `ukktodo` dipilih, maka Anda dapat mulai melakukan query pada basis data tersebut menggunakan objek koneksi `$mysqli`.
- **Koneksi Gagal**: Jika terjadi kesalahan (misalnya, salah nama server, pengguna, atau kata sandi, atau jika basis data tidak ada), maka akan menghasilkan pesan kesalahan yang sesuai.

Keimpulan

- **Keamanan**: Menggunakan `root` sebagai pengguna basis data tidak disarankan untuk aplikasi yang dijalankan di lingkungan produksi. Sebaiknya, buat pengguna terpisah dengan hak akses yang terbatas.
- **Penanganan Kesalahan yang Lebih Baik**: Menggunakan `or die(...)` adalah cara yang sangat sederhana untuk menangani kesalahan. Di lingkungan aplikasi yang lebih kompleks, sebaiknya gunakan pengecualian atau mekanisme logging untuk penanganan kesalahan yang lebih baik.
- **Koneksi yang Aman**: Jika memungkinkan, selalu gunakan koneksi yang aman (misalnya, SSL) saat menghubungkan ke database.

Tidak ada komentar:

Posting Komentar

LATIHAN PPG - PELATIHAN MANDIRI

Empati secara kognitif diperoleh melalui Resertive Learning Kemampuan individu dalam memberikan respons atau tindakan sesuai dengan perasaan...