Membuat Web Satu-Halaman

Tutorial ini aku buat untuk murid-murid Multimedia SMKN 1 Nganjuk yang lagi bingung bikin desain majalah digital untuk lomba MADIG Jilid 7 yang diselenggarakan Komputek. Tutorial ini merupakan saduran dari tutorial yang berjudul Page Transition with CSS3 dari Codrops.

Hanya efek slide-horizontal saja yang ditampilkan dalam tutorial. Selain itu, semua style yang bersifat asesoris sengaja dihilangkan agar murid-muridku bisa lebih mudah menerapkan pilihan style-nya masing-masing.

InsyaAllah, tutorialnya akan secara bertahap ditambahkan agar nantinya bisa terlihat proses pembuatan dan hasil akhirnya.

Tutorial sudah dalam bentuk PDF sehingga bisa di-unduh dan dipelajari secara offline. Semoga bermanfaat.

Unduh:

  1. Membuat Web, 638KB

Bimtek Calon Asesor Kompetensi

Mulai hari Selasa, 29 Oktober 2013, diselenggarakan “Bimtek Penyusunan Dokumen Mutu dan Pengembangan Skema Sertifikasi” dan “Bimtek Calon Asesor”. Untuk penyusun dokumen (pendok) mengambil tempat di Hotel 88 Surabaya, sedangkan Bimtek Calon Asesor diselenggarakan di dua tempat yang berbeda, yaitu: Hotel Halogen dan Country Heritage Resort Hotel.

Bimtek Calon Asesor

Bimtek Calon Asesor sebenarnya merupakan workshop untuk mempersiapkan kompetensi asesmen peserta.  Di dalamnya, ada 3 (tiga) kompetensi yang harus dikuasai oleh seorang asesor, yaitu:

  1. Merencanakan dan Mengorganisasikan Asesmen (TAAASS401C)
  2. Mengembangkan Perangkat Asesmen (TAAASS403B)
  3. Mengases Kompetensi (TAAASS402C)

Selain mengikuti paparan materi 3 (tiga) kompetensi tersebut, peserta juga diharuskan membuat dokumen hingga praktik melakukan asesmen. Direncanakan pada hari terakhir (3 November 2013), real assessment dilakukan, dimana para calon asesor dinilai pemahamannya dan kemampuan dalam melakukan asesmen.

Dikarenakan informasi terkait dengan kegiatan ini sangat minim, persiapan masing-masing peserta dirasa kurang. Sebagai contoh, dalam kegiatan ini dibutuhkan kemampuan meng-operasi-kan perangkat TI seperti komputer/laptop beserta aplikasi wordprocessor. Kemudian, dikarenakan ada dokumen-dokumen yang perlu dicetak, peserta semestinya menyiapkan printer berikut kertasnya. Kemudian juga terkait Standar Kompetensi yang digunakan ternyata mengacu pada Standar Kompetensi Kerja Nasional (SKKNI).

Selain itu, pemahaman peserta yang semuanya adalah guru SMK tentang sertifikasi profesi juga masih rancu dengan Uji Kompetensi Keahlian (UKK) yang merupakan satu rangkaian Ujian Nasional (UN) untuk SMK. Sertifikasi Profesi ternyata terkait dengan suatu jenis pekerjaan bukan dengan standar kompetensi yang diperoleh di SMK. Suatu profesi mungkin melibatkan beberapa kompetensi, dan setiap unit kompetensi itu harus di-uji.

Dengan adanya kegiatan ini, setiap SMK peserta akan menjadi Lembaga Sertifikasi Profesi Pihak I (LSP I). LSP I ini kemudian akan memiliki kewenangan untuk men-sertifikasi siswa lulusan untuk suatu jenis pekerjaan. Sehingga, diharapkan siswa yang telah mengantongi Sertifikat Profesi dapat memperoleh pekerjaan dan tentu saja penghasilan yang sesuai.

Semoga, kegiatan ini dapat berlangsung dengan baik dan membawa manfaat untuk peningkatan mutu pendidikan di SMK khususnya.

Mengenal Bootstrap 3.0

Bootstrap Tutorial

 

Tutorial Mengenal Bootstrap 3.0 ini berisi contoh penggunaan Twitter Bootstrap 3.0 untuk membuat halaman web. Sehingga tidak dibahas secara detil style dan fungsi bawaan Bootstrap. Dokumentasi Bootstrap 3.0 bisa dilihat di website resminya: http://getbootstrap.com/. Tutorial ini secara khusus diperuntukkan bagi Mahasiswa Akademi Komunitas Negeri Nganjuk semester 3. Tapi, siapapun kamu boleh juga kok unduh tutorial ini.

Link downloadnya:

Jika kamu mengalami kesulitasn memahami/mempraktikkan tutorial, silahkan baca lebih lanjut dokumentasi Bootstrap. Semoga manfaat…

[Baru Tahu] Menampilkan Nama Field Tabel dengan PHP

Wah… bener-bener masih ijo / newbi / pemula atau apalah namanya aku ini soal PHP. Bagaimana tidak… baru hari ini aku tahu jika dengan PHP kita bisa menampilkan nama field tabel dalam database. Biasanya aku pake cara seperti ini:

<?php
$buku = mysql_query("SELECT * FROM buku");
echo '<table border="1" cellspacing="0">';
echo '<tr><th>No.</th><th>Judul Buku</th><th>Penulis</th><th>Penerbit</th><th>Tahun Terbit</th><th colspan="2">&nbsp;</th></tr>';
if(mysql_num_rows($buku) > 0){
$no = 1;
while(list($idbuku, $judul, $penulis, $penerbit, $tahun) = mysql_fetch_array($buku)){
echo '<tr><td>'.$no.'</td>';
echo '<td>'.$judul.'</td><td>'.$penulis.'</td><td>'.$penerbit.'</td><td>'.$tahun.'</td>';
echo '<td><a href="buku.php?hlm=edit&id='.$idbuku.'">Edit</a></td>';
echo '<td><a href="buku.php?hlm=del&id='.$idbuku.'">Del</a></td>';
echo '</tr>';
$no++;
}
} else {
echo '<tr><td colspan="7" align="center">tidak ada data untuk ditampilkan</td></tr>';
}
echo '</table>';
?>

Padahal bisa dilakukan dengan cara yang (kelihatannya) lebih mudah seperti ini: Baca lebih lanjut

[Belajar] Aplikasi Perpuss berbasis Web

perpuss 0.5

perpuss 0.5

Sekedar ingin berbagi contoh program (sederhana) berbasis PHP + MySQL. Contoh ini aku berikan di kuliah mahasiswa Akademi Komunitas Nganjuk. Harapannya sih agar mahasiswa bisa melihat kerangka / proses pembuatan program, mulai dari ide sampai coding. Tapi… kalo dipikir-pikir, setiap programmer punya workflow-nya sendiri.

Dinamai perpuss maksudnya “perpus-sederhana” karena memang dibuat se-sederhana mungkin: dari database, tampilan, dan kompleksitas program. Selain itu, program ini belum selesai. Karena memang tugas mahasiswa untuk menyelesaikannya.

Well, bagi yang berminat bisa langsung unduh di sini.

[Baru Tahu] PHP foreach

Hmm… hari yang aneh, bagaimana tidak, banyak tutorial di internet yang melibatkan perulangan dengan foreach. Kalo perulangan dengan for sih gampang dan biasa. Daripada pusing, buka-buka manual asli dari PHP. Beberapa contoh kubaca dan begini kesimpulanku.

Contoh skrip PHP dengan foreach:

<?php
$arr = array("satu", "dua", "tiga");

echo "<h3>Langsung tampilkan Nilai/Value</h3>";
foreach($arr as $value){
echo "Value: $value<br>";
}

echo "<h3>tampilkan indeks array dan Nilai/Value</h3>";
foreach($arr as $indeks => $nilai){
echo "Key[ $indeks ]: bernilai $nilai<br>";
}
?>

Jadi, dengan menggunakan foreach kita bisa langsung menampilkan nilai dari sebuah array atau sekaligus menampilkan indeks array-nya.

Well, baru sampai di sini. Jumpa lagi lain waktu, saatnya menerapkan sedikit ilmu ini.

Pengumuman Kelulusan 2013

infolulus2013

scan untuk mengakses pengumuman kelulusan melalui gadgetmu

Alhamdulillah… akhirnya, biarpun sangat sederhana, aplikasi “Pengumuman Kelulusan 2013” SMK Negeri 1 Nganjuk sudah online (http://smkn1nganjuk.sch.id/infolulus/) Aplikasi ini, tentu saja ditenagai PHP dan MySQL. Selain itu, karena malas, aplikasi ini menggunakan Twitter Bootstrap untuk User Interface-nya. Tidak ketinggalan, jQuery yang luar biasa!

Dan, sekalian percobaan membuat halaman web responsif sehingga dapat ditampilkan di smartphone dan tablet. Scan kode di samping untuk mengakses laman pengumuman melalui gadget-mu.

Oh.. oh.. satu lagi, statistik yang dipasang itu berdasar jumlah peserta Ujian Nasional (UN) 2013 di SMK Negeri 1 Nganjuk. Grafik untuk statistik dibuat menggunakan pChart.

Rencana ke depan, kalo nggak males, aplikasi ini akan dibuat lebih lengkap dan memiliki halaman administrator. Karena proses upload data berlangsung secara manual. Eit… tentu saja jika tahun depan masih ada UN untuk diumumkan kelulusannya, he he he.

Well, untuk saat ini aplikasi sedang di-uji coba dengan data bohongan (nama dan status). Sekedar untuk mencoba

Pengumuman Lulus 2013

Pengumuman Lulus 2013

skrip, nomor ujian 23-101-002-7 sengaja diberi keterangan “TIDAK LULUS”. Nanti, menjelang pengumuman, H-2, aplikasi akan ditutup dengan counter yang menghitung mundur.

Rencananya, pengumuman akan dilaksanakan tanggal 24 Mei 2013, insyaAllah.