Compass SASS – Reset style css

Sebelum membuat kode untuk berbagai style css, pertama kali yang biasa dilakukan adalah mereset style css terlebih dahulu.

Jika menuliskan kode style reset secara biasa akan banyak kode yang di tuliskan, lumayan menyita waktu.

Namun dengan menggunakan compass sass anda tidak perlu melakukan hal tersebut. Karena sudah ada yang buatkan kita tinggal panggil, dan bim salabim, kode reset muncul dengan sendirinya.

pada file style.scss tuliskan kode seperti berikut.

@import "compass/css3"
@import "compass/reset";
...




dibawahnya masukan kode scss yang lainya.

Langkah Awal Menggunakan Compass / SASS

Compass merupakan pengembangan dari sass, didalam compass terdapat kode-kode seperti library yang sudah dibuatkan, dan kita tinggal memanggilnya. Dengan kata lain pekerjaan kita akan lebih mudah jika menggunakan compass untuk membuat kode di scss. Jika ingin informasi lebih detail tentang compass bagaiana cara installnya dan descripsinya silahkan searching di google.

Baik jika sudah terinstall compass, kita akan mencoba membuat salah satu contoh awal pembuatan layout dengan menggunakan compass.

Pada command line atau cmd,

status kondisi berada pada direktori project. misal :

c:\xampp\htdocs\layout>

kemudian masukan perintah untuk membuat project compassnya, tuliskan kode dibawah

c:\xampp\htdocs\layout>compass create

jika di enter dengan otomatis akan membuat file-file project compass.

dan hasil di folder akan memunculkan file-file berikut.

compass-project

folder sass berisikan file scss yang merupakan bahan untuk membuat file css.

folder stylesheets berisikan file css hasil dari scss.
file config.rb adalah file untuk konfigurasi dari compass.

sedangkan folder css diatas adalah , folder yang sudah saya siapkan, alias bukan hasil generate dari compass.

compass-config

output default akan di simpan di folder stylesheets, jika ingin menggantinya ke folder css, maka, rubah tulisan stylesheets menjadi css pada baris ke 5, seperti dibawah.

css_dir = "css"

pada direktori stylesheets di hapus saja karena kita akan menggunakan folder scss, dan juga file-file di dalam folder sass di kosongkan karena kita tidak membutuhkannya.

lalu di dalam folder sass dibuat file bernama style.scss, sedangkan di dalam folder css di isi dengan file bernama style.css.

compass-style

lalu kita buka file style.scss untuk memasukan kode scssnya.

@import "compass/css3";

.box {
 @include border-radius(4px);
}

langkah yang terpenting adalah sekarang mencoba merunning compass untuk membuat hasil output cssnya. caranya adalah masukan perintah di command line yang tadi yaitu :

compass watch

dan hasil di style.css setelah di running adalah seperti berikut

/* line 3, ../sass/style.scss */
.box {
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
}

bisa kita bandingkan kode di scss dan css, kita hanya menuliskan satu baris dan hasilnya beberapa baris, ini bisa memudahkan kita dalam menulis kode css.

cukup sekian bahasannya, ngartos? kalau belum ngartos bagus … berarti anda harus belajar lagi… hatur nuhun, wassalam.

 

 

 

Compress File Zip dengan Command Line di Ubuntu

Assalamualaikum dulur-dulur sadaya…, Compres file zip di window tidak lah sulit, semua sudah bisa tinggal klak, klik selesai. namun jika bertemu dengan linux seperti ubuntu yang hanya menampilkan terminal, ceritanya tidak seperti itu. Caranya tidak bisa klak klik, tapi harus mengetikan perintah untuk melakukan compress file.

Bagaimana cara atau perintah compress file dilinux ubuntu? tong waka lier, caranya adalah ketikan perintah seperti contoh berikut. untuk file zip, ketikan perintah ..

zip namaFile.zip fileSumber1 | fileSumber2

atau

zip namaFile.zip folderSumber1 | folderSumber2

jika ingin format yang lainnya, serperti tar.gz seperti berikut

tar zcvf namaFile.tar.gz fileSumber1 | fileSumber2

atau

tar zcvf namaFile.tar.gz folderSumber1 | folderSumber2

mudah kan, selamat mencoba. hatur nuhun.

 

Cara Import Mudah Database Mysql dengan Command Line

Tulisan ini untuk yang baru mengenal mysql. jika sudah bisa sekip aja.

Setelah melakukan kegiatan backup database mysql ke format sql seperti yang sudah di jelaskan pada tulisan sebelumnya. maka langkah selanjutnya adalah bagaimana melakukan import ke dalam database baru.

Sebelum import kita database baru sudah dibuatkan dengan nama dbbaru, dan file sql backupnya bernama dbbackup.sql.

Pada command line masukan perintah backup, jika anda menggunakan xampp windows seperti saya maka posisi direktory ada di :

c:\xampp\mysql\bin

masukan perintah import mysql seperti berikut

mysql -u root -p dbbaru < dbbackup.sql

jika meminta password masukan password tersebut, dan tunggu hingga proses import selesai.

cukup sederhana dan mudah. silahkan mencoba sendiri.

Haturnuhun, wassalam.

 

 

 

Cara Backup Mudah Database Mysql dengan Command Line

Backup adalah sebuah kegiatan untuk menduplikat sesuatu (jadi inget syahroni). Beberapa dalam aplikasi yang sering di backup biasanya adalah database dan file-file.

Dalam postingan ini, akan membahas cara membackup mysql dengan command line selain melalui gui. Judul ini sudah banyak sekali di google, kurang lebih sama. Tidak ada salahnya saya ikut menulisnya kembali.

Kenapa memilih command line dari pada gui. Sebernarnya sama-sama aja tujuanya, kembali kepada karakter masing-masing orang, kadang ada yang suka pake command line biar kelihatan keren, atau yang suka pake gui biar ga ribet, ga masalah sama sekali. Silahkan anda pilih yang mana, sarua-sarua wae alias tidak ada masalah.

baik langsung ke pokoknya.

untuk menggunakan command line, tentu saja anda harus masuk ke command line. sebagai contoh saya pakai windows berarti langkah awal membuka command line.

Saya klik tombol start > run, kemudian ketik cmd.

Lalu masuk ke direktori mysql bin di xampp. ketik :

cd c:\xampp\mysql\bin

Setelah itu ketik perintah backup mysqlnya

mysqldump -u root -p nama_database > c:\backup_nama_database.sql

jika minta password masukan passwordnya.

klik enter. proses backup selesai, file backup ada di c. cukup mudah.

semoga bermanfaat, wassalam.

Konsep Struktur File dalam Sass

Struktur file yang rapih akan membantu dalam pekerjaan saat kita melakukan koding, hal ini di butuhkan setiap pengkodingan apapun, kalau tidak dilakukan maka yang terjadi adalah pr di kemudian hari, dari pada lier alias pusing dikemudian hari lebih baik di antisipasi we dari sekarang.

Dalam pengkodean sass sebenernya bebas-bebas aja, tidak ada yang mengikat dalam konsep struktur file, bakal jalan-jalan saja. Namun, tidak ada salahnya kita coba buat sebuah struktur filenya biar rapih dan supaya bisa memudahkan kita dalam pengerjaan.

langsung wae ka intina. jadi untuk strukturnya sederhana adalah sebagai berikut :

root web
— index.html
— [sass]
—- _variable.scss
—- _layout.scss
— [css]
—- style.css

folder sass berisikan file-file master atawa bahan sass nya, folder css berisikan file output stye css nya. nah kurang lebih kitu.

*maaf kalau ada basa yang kurang dimengerti sebagian dalam rangka melestarikan budaya asli indonesia di dunia maya. harap dimaklum.

wassalam.

 

 

Review komponen-komponen dalam web e-commerce

Web E-commerce sudah bertebaran dimana-mana, beda dengan jaman dahulu, dimana web e-commerce masih sedikit. Ini memperlihatkan bahwa minat kepercayaan masyarakat akan transaksi online meningkat.

Namun, disini tidak akan membahas tentang perkembangan e-commerce di indonesia, saya percaya temen-temen sudah lebih mengetahui.

sesuai dengan judul diatas, yang akan di tulis dibawah adalah mengenai hal-hal apa saja yang menjadi komponen pembentuk web e-commerce. Terutama bagi temen-temen yang baru dan ingin mencoba membuat web e-commerce atau toko online.

Sebagai contoh, berikut salah satu templete untuk e-commerce.

Free-Online-Shopping-Ecommerce-Mobile-Website-Template

Slideshow Info Penting

Kenapa disebut slideshow Info Penting karena berisi slide gambar-gambar yang berisikan informasi utama, dan berisi informasi yang ingin pertama kali dilihat oleh pengunjung.

Produk
Tentu saja bagian komponen yang paling penting dalam e-commerce adalah produk yang akan dijual. Pada bagian produk di tampilkan biasanya
nama produk,
gambar,
harga (harga biasanya selain harga normal, juga ada harga diskon).

 

bersambung…

Pengujian UAT (User Acceptance Test)

Apa itu UAT ?

UAT  (User Acceptance Test) adalah suatu proses pengujian yang dilakukan oleh pengguna dengan hasil output sebuah dokumen hasil uji yang dapat dijadikan bukti bahwa software sudah diterima dan sudah memenuhi kebutuhan yang diminta. UAT tidak jauh beda dengan kusioner pada tahap awal pembuatan aplikasi.

Contoh Pengujian

Untuk mengetahui tanggapan responden (user) terhadap aplikasi pembelajaran yang akan diimplementasikan, maka dilakukan pengujian dengan memberikan 4 pertanyaan kepada 36 responden (siswa)  dimana jawaban dari pertanyaan tersebut terdiri dari tingkatan yang dapat dipilih sebagai berikut:

 

contoh-uat-1

contoh-uat-2

contoh-uat-3

contoh-uat-4

Data yang didapat di atas diolah dengan cara mengalikan setiap poin jawaban dengan bobot yang sudah ditentukan sesuai dengan tabel bobot nilai jawaban. Dai hasil perhitungan dengan mengalikan setiap jawaban bobot yang sudah ditentukan maka didapat hasil sebagai berikut Tabel Data Kuesioner Siswa Setelah Diolah

contoh-uat-5

a. Analisa pertanyaan pertama
Dari tabel di atas dapat dilihat bahwa jumlah nilai dari 36 responden untuk pertanyaan pertama adalah 136. Nilai rata-ratanya adalah 136/36 = 3.7. Prosentase nilainya adalah 3.7/5 x 100 = 74%.
b. Analisa pertanyaan kedua
Dari tabel di atas dapat dilihat bahwa jumlah nilai dari 36 responden untuk pertanyaan kedua adalah 128. Nilai rata-ratanya adalah 128/36 = 3.5. Prosentase nilainya adalah 3.5/5 x 100 = 70%.
c. Analisa pertanyaan ketiga
Dari tabel di atas dapat dilihat bahwa jumlah nilai dari 36 responden untuk pertanyaan ketiga adalah 129. Nilai rata-ratanya adalah 129/36 = 3.6 Prosentase nilainya adalah 3.6/5 x 100 = 72%.
d. Analisa pertanyaan keempat
Dari tabel di atas dapat dilihat bahwa jumlah nilai dari 36 responden untuk pertanyaan keempat adalah 137. Nilai rata-ratanya adalah 137/36 = 3.8. Prosentase nilainya adalah 3.8/5 x 100 = 76%.
e. Analisa pertanyaan kelima
Dari tabel di atas dapat dilihat bahwa jumlah nilai dari 36 responden untuk pertanyaan keempat adalah 147. Nilai rata-ratanya adalah 147/36 = 4.1. Prosentase nilainya adalah 4.1/5 x 100 = 82%.
f. Analisa pertanyaan keenam
Dari tabel di atas dapat dilihat bahwa jumlah nilai dari 36 responden untuk pertanyaan keempat adalah 144. Nilai rata-ratanya adalah 144/36 = 4. Prosentase nilainya adalah 4/5 x 100 = 80%.
g. Analisa pertanyaan ketujuh
Dari tabel di atas dapat dilihat bahwa jumlah nilai dari 36 responden untuk pertanyaan keempat adalah 151. Nilai rata-ratanya adalah 151/36 = 4.2. Prosentase nilainya adalah 4.2/5 x 100 = 84%.
h. Analisa pertanyaan kedelapan
Dari tabel di atas dapat dilihat bahwa jumlah nilai dari 36 responden untuk pertanyaan keempat adalah 137. Nilai rata-ratanya adalah 152/36 = 4.2. Prosentase nilainya adalah 4.2/5 x 100 = 84%.

Dari data diatas dapat disimpulkan bahwa media pembelajaran biologi kelas VIII tersebut mempunyai tampilan yang menarik, menu-menu pada media web mudah dipahami, isi atau materi mudah dimengerti dan dipahami, adanya contoh-contoh juga membantu dalam memhami materi biologi, evaluasi yang tersedia sudah sesuai dengan silabus serta evaluasi membantu mengukur pemahaman terhadap materi, media pembelajaran web ini juga dapat dijadikan media bantu belajar dan media pembelajaran web ini sudah cukup baik.

Referensi :

naufansapoetra[dot]blogspot[dot]co[dot]id

Contoh Sederhana Edit string HTML dengan DOMDocument di PHP

DOMDocument merupakan salah satu fungsi PHP untuk mengedit variabel string text yang berisi tag-tag HTML secara otomatis atau online dengan script PHP yang sudah disediakan. berikut contoh penggunaan DOMDocument untuk mengambil tag img dan menset image default jika sumber nama tidak ditemukan.

// init dom document
$dom = new DOMDocument();
$dom->loadHTML($string);

// get dom img
$tags = $dom->getElementsByTagName(‘img’);

foreach ($tags as $tag) {

// replace style img empty
$tag->setAttribute(“style”, “”);
// get src
$src = $tag->getAttribute(‘src’);
$file_name = str_replace(“%20″, ” “, basename($src));

if($file_name==””) {

$src_default = “/images/no-found.png”;
$tag->setAttribute(“src”, $src_default);

}
}

$string = $dom->saveHTML();

semoga bermanfaat. wassalam.