Membuat To-Do List atau Notes di Website

To-Do List atau Notes biasa di gunakan untuk mencatat hal-hal yang mungkin akan di lakukan nanti atau mencatat ulang tahun seseorang sehingga kita tidak lupa, bagaimana jika kita lupa? ya tinggal lihat saja catatan yang telah di tulis tadi.

Di artikel ini saya ingin membagikan ilmu saya tentang cara membuat to-do list atau notes di sebuah website atau di website kita sendiri. Fungsi dari to-do list yang akan kita buat adalah sebagai catatan atau arsip anda yang di simpan di database website anda sebagai arsip atau bisa juga di gunakan sebagai catatan. Ok, saat ini saya agak bingung menjelaskannya jadi untuk mendalami arti dari to-do list ini silahkan googling dulu sebelum melanjutkan untuk lebih bisa memahami isi dari artikel ini.

Ok, tidak usah berpanjang lebar lagi karena panjang kali lebar sama dengan luas, karena luas itulah maka saya langsung ke inti dari artikel ini jika kita berputar-putar hanya di penjelasannya saja mungkin artikel ini tidak akan habis di bahas dengan satu artikel mungkin bisa jadi beberapa artikel. pertama-tama kita siapkan dahulu database yang akan di gunakan sebagai tempat penyimpanan data-data to-do list tersebut. Berikut ini adalah struktur databasenya.

  1. CREATE TABLE `todo` (
  2.   `id` INT(11) AUTO_INCREMENT,
  3.   `title` VARCHAR(100),
  4.   `date` VARCHAR(20),
  5.   `text` text,
  6. PRIMARY KEY(`id`)
  7. );

Pada database kita membuat kolom ‘id’ yang akan di gunakan untuk membedakan antara catatan satu dengan yang lainnya atau sebagai identitas catatan tersebut, kolom ‘title’ di gunakan untuk membedakan atau untuk memberi judul antara tiap catatan, kolom ‘date’ di gunakan untuk menampilkan tanggal catatan tersebut di simpan atau di buat, kolom ‘text’ di gunakan untuk menampung tulisan yang ada di dalam catatan tersebut.

Karena yang ingin kita buat ini adalah catatan yang bisa di ubah atau di edit maka kita harus membuat script untuk mengedit catatannya dan juga ada script untuk menghapus catatannya karena kalau di tambah terus tanpa di hapus akan membebani database tempat anda menyimpan catatan anda. Berikut ini form utama yang di gunakan untuk input catatan pertama kali.

todo.htm

  1. <html>
  2. <head>
  3. <title>To-Do List</title>
  4. </head>
  5. <body>
  6.  
  7. <form action="submit.php" method="post">
  8. Judul :<br/><input type="text" name="title"/><br/>
  9. Teks :<br/><textarea name="text" cols="30" rows="5"></textarea><br/>
  10. <input type="submit" value="Simpan"/>
  11. </form>
  12.  
  13. </body>
  14. </html>

Saya tidak akan menjelaskan bagian ini karena saya anggap anda sudah mengerti fungsi dari form ini. Selanjutnya kita membuat script yang mana script ini akan memproses input yang di kirim dari file “todo.htm” berikut scriptnya.

submit.php

  1. <?php
  2. // Menerima input yang di kirim dari file "todo.htm"
  3. $title = $_POST['title'];
  4. $text = $_POST['text'];
  5. $date = date('d-m-Y H:i:s');
  6.  
  7. // Koneksi ke database "MySQL"
  8. mysql_connect("dbhost", "dbuser", "dbpass");
  9. mysql_select_db("dbname");
  10.  
  11. // Menyimpan data
  12. $sql = mysql_query("INSERT INTO `todo` (`title`, `date`, `text`) VALUES ('$title', '$date', '$text')");
  13.  
  14. // Output hasil
  15. if ($sql)
  16. {
  17. // Jika berhasil tersimpan maka pesan ini di tampilkan
  18. echo ("<p>Penyimpanan data berhasil.</p>");
  19. }
  20. else
  21. // Jika gagal pesan ini di tampilkan
  22. echo ("<p>Penyimpanan data gagal.</p><br/><a href=\"list.php\">Daftar Catatan</a>");
  23.  
  24. ?>

Script di atas sudah di sediakan penjelasannya jadi langsung saja ke bagian selanjutnya dari artikel ini. Script untuk menampilkan daftar catatan yang sudah di simpan di database, berikut ini adalah script untuk menampilkan datanya.

list.php

  1. <?php
  2. // Koneksi ke database "MySQL"
  3. mysql_connet("dbhost", "dbuser", "dbpass");
  4. mysql_select_db("dbname");
  5.  
  6. // Meminta daftar catatan dari database
  7. $sql = mysql_query("SELECT * FROM `todo`");
  8.  
  9. // Menampilkan daftar catatan yang di minta dari database
  10. $no = 1;
  11. while ($data = mysql_fetch_array($sql))
  12. {
  13. echo ("$no. <a href=\"view.php?id=$data['id']\">$data['title']</a> (<a href=\"edit.php?id=$data['id']\">Edit</a> | <a href=\"edit.php?id=$data['id']&act=del\">Hapus</a>)<br/>");
  14. }
  15.  
  16. ?>

Di script ini saya sediakan dua link untuk mengedit dan menghapus catatan anda. Berikutnya script untuk melihat catatannya.

view.php

  1. <?php
  2. // Koneksi ke "MySQL"
  3. mysql_connect("dbhost", "dbuser", "dbpass");
  4. mysql_select_db("dbname");
  5.  
  6. // Mengambil id file
  7. $id = $_GET['id'];
  8.  
  9. // meminta data dari database
  10. $sql = mysql_fetch_array(mysql_query("SELECT * FROM `todo` WHERE `id` = '$id'"));
  11.  
  12. echo ("
  13. <html>
  14. <head>
  15. <titile>$sql['title']</title>
  16. </head>
  17. <body>
  18. <p>Judul: $sql['title']<p/><br/><br/>
  19. <p>Teks: $sql['text']</p>
  20. <a href=\"edit.php?id=$id\">Edit</a> | <a href=\"edit.php?id=$id&act=del\">Hapus</a> | <a href=\"list.php\">Daftar Catatan</a>
  21. </body>
  22. </html>
  23. ");
  24. ?>

Berikutnya script untuk edit dan hapus catatannya.

edit.php

  1. <?php
  2. // Koneksi ke "MySQL"
  3. mysql_connect("dbhost", "dbuser", "dbpass");
  4. mysql_select_db("dbname");
  5.  
  6. // membaca id yang di kirimkan dari file "list.php"
  7. $id = $_GET['id'];
  8.  
  9. if ($_GET['act'] == 'del')
  10. {
  11. mysql_query("DELETE FROM `todo` WHERE `id` = '$id' LIMIT 1");
  12. header("Location: list.php");
  13. }
  14.  
  15. $sql = mysql_fetch_array(mysql_query("SELECT * FROM `todo` WHERE `id` = '$id'"));
  16.  
  17. echo ("
  18. <html>
  19. <head>
  20. <title>Edit Catatan</title>
  21. </head>
  22. <body>
  23. <form action="edit2.php?id=$id" method="post">
  24. Judul :<br/><input type=\"text\" name=\"title\" value=\"$sql['title']\"/><br/>
  25. Teks :<br/><textarea name=\"text\" rows=\"5\" cols=\"30\">$sql['text']</textarea><br/>
  26. <input type=\"submit\" value=\"Edit\"/>
  27. </form>
  28. </body>
  29. </html>
  30. ");
  31. ?>

Dan script untuk memproses hasil editnya.

edit2.php

  1. <?php
  2. // Koneksi ke "MySQL"
  3. mysql_connect("dbhost", "dbuser", "dbpass");
  4. mysql_select_db("dbname");
  5.  
  6. // Membaca data dari file "edit.php"
  7. $id = $_GET['id'];
  8. $title = $_POST['title'];
  9. $text = $_POST['text'];
  10.  
  11. // Menyimpan data ke database
  12. $sql = mysql_query("UPDATE `todo` SET `title` = '$title' AND `text` = '$text' WHERE `id` = '$id' LIMIT 1");
  13.  
  14. // Output hasil
  15. if ($sql)
  16. {
  17. echo ("<p>Catatan $title berhasil di update.</p>");
  18. }
  19. else
  20. echo ("<p>Catatan $title gagal di update.</p>");
  21. ?>
  22. <a href="list.php">Daftar Catatan</a>

Nah selesai juga deh artikelnya panjang juga ya?? Tapi tidak apa-apa biarpun saya capek mengetiknya tapi semoga artikel ini bermanfaat untuk anda. Oh iya untuk memudahkan anda saya sudah menyiapkan script ini dalam bentuk zip (compress) jadi anda hanya perlu mendownloadnya dan mencobanya berikut adalah linknya. Semoga bermanfaat.

[Download Script]

Leave a Reply

Your email address will not be published. Required fields are marked *