Membuat Auto Scroll Follow Sidebar

Cara membuat auto scroll follow sidebar, tutorial ini menjelaskan cara membuat sidebar dalam posisi fixed artinya saat kita melakukan scroll (gulir) browser maka sidebar itu akan mengikuti juga jadi tidak bersifat static, hal ini memudahkan kita yang membuat program one page crud atau menu sidebar yang mengikuti kemana arah scroll (gulir) apakah keatas atau kebawah. Sebenarnya kita bisa menambahkan sintaks css yang sedikit aja (position:fixed) namun sintaks ini tidak berjalan sempurna artinya ia hanya fixed browser aja tanpa ada efek animasi berjalan.

Pada tutorial ini kita akan membuat sidebar akan mengikut kemana guliran atau scroller yang kita lakukan pada browser apakah keatas atau kebawah dan tidak mengubah posisi lebar (bukan tinggi), jika menggunakan sintaks dasar position fixed css maka letak posisi tidak sejajar dengan desain kolom layout kita berbeda dengan halnya yang akan kita bahas pada artikel ini.

Penggunaan Dasar CSS

Cara yang paling mudah adalah dengan menggunakan css seperti yang telah saya jelaskan diatas namun kekurangannya tata letaknya harus kita desain ulang seperti mengatur ukuran margin atau kanan/kiri untuk menyesuaikan dengan konten/artikel, sintaks sederhana seperti dibawah ini.

#content { 
  width: 700px; 
  margin: 15px auto; 
  position: relative; 
}

#sidebar { 
  width: 300px; 
  position: fixed; 
  margin-left: 510px; 
}

Dengan teknik ini sidebar tetap pada posisinya pada saat scroll lagi bergulir keatas atau kebawah seperti sudah menempel pada jendela browser

Efek Animasi jQuery

Jika kita menggunakan jquery/javascript maka sidebar akan berjalan/beranimasi saat kita lagi mengulir scroll baik keatas maupun kebawah mulain dari posisi dasar sampai pada batasan akhir sidebar tersebut, selain itu kita bisa mengukur seberapa jauh guliran scrollnya beserta dengan juga mengatur sesuka hati kita.

$(function() {

    var $sidebar   = $("#sidebar"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
    
});

Metode ini lebih ditekankan pada pemberian efek animasi berjalan saat jendela sidebar lagi bergulir scroll keatas atau kebawah. Sekian

Membuat Interaksi Database Mudah Dengan NotORM

NotORM adalah sebuah singkatan dari Not Object Relational Mappers (ORMs). Itu sangat membantu Anda untuk secara cepat membuat aplikasi Anda tanpa khawatir tentang menulis query SQL baku. Idenya adalah untuk menyederhanakan interaksi database dan menghindari kemungkinan kesalahan dalam menulis query yang kompleks. Bahkan, ORMs modern dapat menghasilkan Model/Entitas dari database, dan sebaliknya.

Sebenarnya semua ORM itu sangat sederhana untuk menggunakannya jika Anda sudah memiliki pengalaman menggunakannya. Untuk membuat sebagian besar dari itu, Anda harus memiliki pemahaman yang mendalam tentang konsep-konsep. Dan ada tempat belajar yang bagus terkait dengan ORM manapun.

Jika Anda sedang mengembangkan sebuah aplikasi sederhana dengan beberapa tabel, menggunakan ORM penuh mungkin berlebihan. Dalam hal ini, Anda mungkin ingin mempertimbangkan untuk menggunakan NotORM. NotORM mudah dipelajari dan mudah digunakan karena menyediakan API intuitif untuk berinteraksi dengan database. Dalam artikel ini saya akan mengajar Anda bagaimana menggunakan NotORM.

Sebelum kita memulai, inilah tata letak basis data yang saya gunakan diseluruh artikel.

CREATE TABLE penulis (
   id INT(6) AUTO_INCREMENT PRIMARY KEY,
   nama VARCHAR(50) NOT NULL
);

CREATE TABLE buku (
   id INT(6) AUTO_INCREMENT PRIMARY KEY,
   judul VARCHAR(70) NOT NULL,
   penulis_id INT(6) NOT NULL
);

CREATE TABLE kategori (
   id INT(6) AUTO_INCREMENT PRIMARY KEY,
   kategori VARCHAR(30) NOT NULL
);

CREATE TABLE kategori_buku (
   id INT(6) AUTO_INCREMENT PRIMARY KEY,
   buku_id INT(6) NOT NULL,
   kategori_id INT(6) NOT NULL
);

Koneksi ke Database

Langkah pertama untuk menggunakan NotORM adalah untuk menciptakan sebuah contoh dari objek NotORM yang menggunakan koneksi PDO aktif untuk antarmuka dengan database.

<?php
$mydsn = "mysql:dbname=library;host=127.0.0.1";
$mypdo = new PDO($mydsn, "dbuser", "dbpassword");
$db = new NotORM($mypdo);

Data Source Name (DSN) adalah cara yang umum untuk menggambarkan koneksi database. Ini berisi nama database menggunakan driver, nama database, dan alamat host. PDO konstruktor menerima DSN dan basis data username dan password untuk menghubungkan. Setelah terhubung, objek PDO akan diteruskan ke NotORM. Kami akan menggunakan contoh NotORM ini seluruh artikel ini.

Penggunaan Dasar

Sekarang kita terhubung melalui NotORM, mari kita daftar semua buku dalam database.

<?php
$mybuku = $db->buku();
foreach ($mybuku as $buku) {
  echo $buku["id"] . " " . $buku["judul"] . "<br>";
}

Ini sangat sesederhana! $db adalah objek NotORM dan buku adalah nama tabel dimana informasi buku kami disimpan. buku() metode mengembalikan array multi-dimensi dengan kolom kunci utama tabel sebagai indeks tingkat pertama. Dalam foreach, $buku merupakan representasi dari data buku, sebuah array dengan kunci dinamai nama kolom tabel. $buku[“judul”] mengembalikan nilai dari kolom judul untuk data itu.

Dalam kebanyakan kasus, Anda tidak akan tertarik untuk mengambil semua kolom dari tabel. Anda dapat menentukan hanya kolom Anda tertarik melalui metode select(). Misalnya, jika Anda hanya ingin judul, Anda bisa menulis ulang contoh sebagai:

<?php
$mybuku = $db->buku()->select("judul");
foreach ($mybuku as $buku) {
  echo $buku["judul"] . "<br>";
}

Mengambil kolom tertentu terutama yang diinginkan pada tabel yang memiliki sejumlah besar kolom, cara ini Anda tidak perlu membuang waktu dan memakan memori serta penyimpanan nilai-nilai yang tidak digunakan.

Untuk mengambil satu data dari tabel menggunakan kunci utama, kami referensi kunci utama dalam query ini klausa WHERE saat menulis SQL. Dalam NotORM, Ada banyak cara kita dapat menyelesaikan tugas, cara termudah adalah dengan menggunakan kunci utama sebagai indeks ke properti tabel.

<?php
$buku = $db->buku[1]; 
echo $buku["judul"];

Ini hanya akan mengambil mendapatkan rincian buku dari data dengan ID 1.

Memfilter Nilai Kolom

NotORM memungkinkan untuk hasil penyaringan pada kondisi yang akan ditentukan dalam klausa WHERE query ini menggunakan metode where(). Untuk menggambarkan, mari kita cari nilai tabel untuk buku dengan judul yang mengandung “Anak-Anak” (pastikan sudah ada data Anak-Anak dalam tabel buku database).

<?php
$mybuku = $db->buku->where("judul LIKE ?", "%Anak-Anak%");
foreach ($mybuku as $buku) {
  echo $buku["id"] . " " . $buku["judul"] . "<br>";
}

Jika Anda tidak akrab dengan prepared statements, Anda mungkin bertanya-tanya apa yang berarti bahwa tanda tanya. Ini adalah cara dalam mengikat paremeters untuk query yang dieksekusi oleh PDO sehingga Anda dapat mengeksekusi query yang sama berkali-kali hanya dengan mengubah nilai-nilai. Sebuah tanda tanya, atau variabel seperti :judul, bertindak seperti pemegang nilai tempat. Anda dapat membaca lebih lanjut tentang prepared statements PDO dalam manual PHP.

NotORM juga memungkinkan Anda untuk rantai metode where() untuk menerapkan lebih dari satu kondisi.

<?php
$mybuku = $db->buku->where("judul LIKE ?", "%The%")
           ->where("id < ?", 5);
foreach ($mybuku as $buku) {
  echo $buku["id"] . " " . $buku["judul"] . "<br>";
}

Pernyataan yang dikeluarkan oleh NotORM untuk contoh di atas adalah setara dengan query SQL berikut:

SELECT * FROM buku WHERE judul LIKE "%The%" AND id < 5

Pengurutan Hasil

Kemungkinan penggunaaan pengurutan sangat jarang dilakukan karena memang bisa diatur dengan javascript/jquery diseluruh seluruh aplikasi Anda. Dalam aplikasi kehidupan nyata, Anda harus bergabung dengan banyak tabel, memanggil data berdasarkan nilai-nilai dalam kolom yang berbeda, membatasi jumlah record diambil, dan sebagainya.

Anda dapat memesan hasil berdasarkan satu atau lebih kolom, naik atau menurun. Contoh yang diberikan di bawah ini akan kembali menggunakan buku berdasarkan urutan ID buku.

<?php
$mybuku = $db->buku->order("id desc");
foreach ($mybuku as $id => $buku) {
  echo $id . " " . $buku["judul"] . "<br>";
}

Jika Anda ingin mengurutkan hasil berdasarkan lebih dari satu kolom, Anda dapat menentukannya, dipisahkan dengan koma.

<?php
$mybuku = $db->buku->order("id desc, judul asc");
foreach ($mybuku as $id => $buku) {
  echo $id . " " . $buku["judul"] . "<br>";
}

Data yang dihasilkan akan dikembalikan dalam urutan ID mereka dan jika ada lebih dari satu data dengan ID yang sama, itu akan berada di urutan judul.

NotORM mendukung membatasi hasil juga. Mari kita membatasi hasil set ke dua data, mulai dari offset 0:

<?php
$mybuku = $db->buku->limit(2, 0);
foreach ($mybuku as $id => $buku) {
  echo $id . " " . $buku["judul"] . "<br>";
}

Tabel Join

Sejauh ini kita sedang membahas tentang daftar buku dalam menggunakan NotORM dengan hanya satu tabel. Sekarang kita ingin bergerak lebih jauh, seperti mencari tahu siapa penulis buku dan sebagainya.

Mari kita mencoba untuk daftar buku bersama dengan penulisnya. Dalam database perpustakaan kami, tabel buku memiliki penulis_id sebagai foreign key yang referensi  dari tabel penulis (masing-masing buku hanya dapat memiliki satu penulis dalam set-upnya).

<table>
 <tr><th>Buku</th><th>Penulis</th></tr>
<?php
$mybuku = $db->buku();
foreach ($mybuku as $buku) {
    echo "<tr>";
    echo "<td>" . $buku["judul"] . "</td>";
    echo "<td>" . $buku->penulis["nama"] . "</td>";
    echo "</tr>";
}
?>
</table>

Bila Anda memanggil $buku->penulis [“nama”], NotORM otomatis menghubungkan tabel buku dengan tabel penulis menggunakan kolom penulis_id dan mengambil rincian penulis untuk data buku. Ini adalah kasus hubungan satu-ke-satu (data di tabel induk akan dikaitkan dengan hanya satu record dalam tabel anak) hubungan.

Dalam kasus hubungan satu-ke-banyak, tabel sekunder akan memiliki lebih dari satu record sesuai dengan satu baris dalam tabel utama. Sebagai contoh, mari kita asumsikan kita dapat menulis ulasan buku, sehingga untuk setiap buku akan ada nol atau lebih ulasan yang yang disimpan dalam tabel lain. Untuk setiap setiap buku maka Anda akan perlu loop lain untuk menampilkan ulasan, jika ada.

Untuk hubungan banyak-ke-banyak, akan ada tabel ketiga yang menghubungkan tabel primer dan sekunder. Kami memiliki table kategori untuk menjaga kategori buku, dan buku dapat memiliki nol atau lebih kategori yang terkait dengan itu. link dipertahankan menggunakan tabel kategori_buku.

<table>
 <tr><th>Buku</th><th>Penulis</th><th>Categories</th></tr>
<?php
$mybuku = $db->buku();
foreach ($mybuku as $buku) {
    echo "<tr>";
    echo "<td>" . $buku["judul"] . "</td>";
    echo "<td>" . $buku->penulis["nama"] . "</td>";
    $categories = array();
    foreach ($buku->kategori_buku() as $kategori_buku) {
        $categories[] = $kategori_buku->kategori["kategori"];
    }
    echo "<td>" . join(", ", $categories) . "</td>";
    echo "</tr>";
}
?>
</table>

Ketika Anda memanggil metode kategori_buku(), itu akan mendapatkan data dari tabel kategori_buku, yang pada gilirannya akan terhubung ke tabel kategori menggunakan $kategori_buku->kategori[“kategori”].

Ada beberapa konvensi default untuk nama tabel dan kolom, jika Anda mengikuti, dapat membuat hubungan tabel lebih mudah dalam NotORM.

  • Nama tabel harus tunggal, yaitu menggunakan buku untuk nama tabel untuk menyimpan rincian buku.
  • Gunakan id sebagai kunci utama untuk tabel Anda. Ini tidak perlu memiliki kunci utama untuk semua tabel, tapi itu ide yang baik.
  • kunci asing dalam sebuah tabel harus dinamai sebagai tabel_id.

Seperti saya katakan, ini hanya konvensi default. Anda dapat mengikuti konvensi yang berbeda jika Anda ingin, tapi kemudian Anda perlu menginformasikan NotORM dari konvensi itu harus mengikuti. librari memiliki kelas, NotORM_Structure_Convention untuk mendefinisikan konvensi penamaan. Berikut adalah contoh sederhana bagaimana menggunakan, yang saya salin dari website NotORM.

<?php
$structure = new NotORM_Structure_Convention(
    $primary = "id_%s", // id_$tabel
    $foreign = "id_%s", // id_$tabel
    $table = "%ss", // {$tabel}s
    $prefix = "wp_" // wp_$tabel
);
$db = new NotORM($pdo, $structure);

Contoh perubahan semua nama tabel untuk plural dan diawali dengan “wp_”. primary key dan foreign keys telah diubah untuk id_tabel.

Pemrosesan Data

Sampai sekarang kita bahas mengambil data yang sudah dalam database. Selanjutnya kita perlu melihat menyimpan dan memperbarui data juga.

Inserts dan updates cukup sederhana dan mudah penggunaannya. Anda hanya perlu membuat sebuah array asosiatif dengan nama kolom sebagai kunci dan value/nilai sebagai argumen untuk tabel metode insert() atau update().

<?php
$buku = $db->buku();
$data = array(
    "judul" => "Beginning PHP 5.3",
    "penulis_id" => 88
);
$hasil = $buku->insert($data);

insert() akan mengembalikan data jika insert berhasil atau false jika gagal. Dari sana, Anda bisa mendapatkan ID dari data yang disisipkan menggunakan $hasil[“id”].

Untuk memperbarui buku, mengambil data buku dari database menggunakan kunci utama (primary key) dan kemudian nilai-nilai didalamnya harus diperbarui sebagai array untuk update().

<?php
$buku = $db->buku[1];
if ($buku) {
    $data = array(
        "judul" => "Pro PHP Patterns, Frameworks, Testing and More"
    );
    $hasil = $buku->update($data);
}

update() akan menghasilkan true jika berhasil atau false jika update gagal.

Demikian pula, Anda bisa menghapus sebuah buku dengan memanggil delete() pada objek buku.

<?php
$buku = $db->buku[10];
if ($buku && $buku->delete()) {
    echo "Buku telah dihapus.";
}

Sangat penting untuk diingat ketika Anda memperbarui atau menghapus baris yang pertama Anda pastikan ada dalam database, jika tidak akan terjadi error.

Ringkasan

Melalui artikel ini Anda sudah menjadi akrab dengan librari sederhana untuk berinteraksi dengan database Anda. Kenyataannya adalah bahwa aplikasi Anda tumbuh besar dengan kode yang menggunakan NotORM akan menjadi mudah dikelola dan sehingga Anda harus memutuskan apakah NotORM cocok berdasarkan ukuran yang Anda harapkan dari aplikasi Anda dan faktor lainnya. Tapi ketika menggunakan NotORM, Anda tidak perlu khawatir tentang menulis query SQL mentah atau menciptakan kelas entitas dengan hubungan yang kompleks. Sebaliknya, Anda dapat menggunakan notasi berorientasi objek yang akrab berurusan dengan tabel dan kolom langsung.