Membangun website dengan drupal

Salah satu dari CMS [Content Management System] yang paling popular saat ini adalah Drupal. Drupal dikenal bukan hanya tampilannya yang bagus, namun karena juga kemudahan saat menggunakannya. Dari menambah halaman dan navigasi website hingga mengatur secondary content dari website. Semuanya mudah untuk di lakukan . Nah bagi kamu yang ingin membangun website dengan Drupal, mugkin cara di bawah ini bisa membantu kamu.

Pastikan bahwa langkah berikut  telah terpenuhi.

1.  Instalasi Drupal 

Karena instalasinya mudah ,proses instalasi tidak akan di bahas secara detail.

Langsung saja jika hosting kamu telah di lengkapi  dengan cPanel, maka silahkan login ke cPanel kamu.

Drupal bisa di install melalui fitur Softaculous>Drupal>Install.

Jika tidak memilki cPanel maka panduannya bisa kamu cari melalui Google.

2.  Memilih Modul

Modul pada Drupal  adalah plugin yang berfungsi menambahkan fitur-fitur pada website. Modul yang terdaftar pada Drupal.org di lisensikan di bawah GPL artinya open source dan bebas untuk dipakai dan di modifikasi.

Untuk menyalakan sebuah modul, loginlah kehalaman administrator Drupal kamudengan user dan password admin yang telah di definisikan pada proses instalasi.

Kemudian masuk  kebagian Administer> Modules.

Klik pada checkbox disamping nama Modul yang ingin kamu aktifkan, kemudian klik save. Tentu saja kamu tidak harus mengaktifkan semua modul yang tersedia karena bisa memperlambat atau bahkan biasa membuat website kamu crash jika tidak hati-hati.

Jika kamu kesulitan memilih modul apa yang harus dan perlu di aktifkan, kamu bisa mencoba  alternatif  lain dengan menggunakan rilis paket instalasi Drupal ,misalnya Acquia http://acquia.com  yang sudah jadi satu dengan modul-modul yang populer.

3.  Mamilih themes

Drupal telah di lengkapi dengan bermacam - macam themes [ template] yang berfungsi untuk mengubah tampilan website kamu dengan cepat. Jenis Themes pada Drupal di bedakan menjadi : Free Advance Themes, contohnya Acquia Marina [yang di gunakan oleh Spread Firefox.com], dan Quick  Themes Color Coice yang telah mendukung modul Color untuk memungkinkan berbagai variasi warna dalam satu template, contohnya Gorland Themes.

Jika kamu menggunakan Template ini ,kamu bisa mengganti warnanya sesuai keinginan kamu melalui menu Administer> Themes> kemudian klik Configure Garland.  Kamu akan di suguhi Color Wheels .

4.  Menambah Pages

Setelah Modul dan Themes, jangan lupa untuk menambah page [halaman] pada website kamu. Misalnya  pages Contak Us dan About Us.

Pada Drupal kamu bisa mengikuti langkah – langkah berikut untuk menambahkan pages [halaman] di website kamu:

Ø  Pada blok Navigation [disisi kiri halaman admin] klik create Content.

Ø  Kamu akan di suguhi dua pilihan: Page dan Story.

Ø  Masukan judul Page.

Ø  Isikan body contentnya , bisa dalam HTML atau pun teks.

Ø  Klik preview untuk melihat tampilan page baru kamu. Opsi Preview tidak menyimpan Konten, jadi jangan lupa untuk mengklik Submit setelah melakukan preview.

5.  Mengatur Block

Drupal di lengkapi dengan sejumlah block.

Diantaranya:  Who’s News, Who’s Online, Search dan Syndicate yang memungkinkan kita untuk menambahkan ikon RSS pada setiap bagian website yang kita inginkan . Kebanyakan Block  Di set  disable secara default. Untuk mengaktifkannya, masuk ke menu Administer> Blocks> dan pilih Block mana yang ingin di tampilkan pad situs kamu.

6.  Set Up Menu Untuk Navigasi Website

Secara default, website Drupal  memilki 3 menu yaitu Primary, Secondary dan Navigation.  Menu Navigation di populasikan secara otomatis dan didalamnya terkandung link yang baru muncul setelah user melakukan login.

Menu primary dan Secondary berfungsi sebagai Top Level Navigation.

Setiap menu pada Drupal bisa dimatikan melalui Administer> Menus.

7.  Mengatur Role dan Permition User

Secara default, Drupal membedakan 2 role user Anonymous dan Authorized. User Anonimous adalah pengunjung website yang tidak melakukan login. User Authorized adalah member website  yang mengunjungi situs kita dan melakukan log in.

8.  Persiapkan SEO Website

Elemwnt standar yang diperlukan untuk melakukan SEO di antaranya adalah Meta Tag,site Maps dan clean URLs.

Untuk mengetahui langkh-langkahnya kamu bisa menginstal modul SEO Checklist yang bisa kamu unduh di  drupal.org

9.  Optimasi Performance

Setiap modul yang dipergunakan akan memakan resource server.

Drupal dilengkapi beberapa fungsi yang bisa mengurangi total penggunaan resorce server. Salah satunya adalah modul Page & Block Cache yang bisa di aktifkan melalui Administer> Performance

10.            Backup!

Melakukan backup adalah tugas yang amat penting untuk di lakukan pada setiap website. Backup bisa dilakukan sebelum update modul, update Drupal, ataus ebelum menambah modul baru ke website kamu.

Sehingga jika terjadi crash pada saat melakukan update situs kamu bisa di kembailkan seperti semula.

Caranya dengan mengunduh di drupal.org yaitu Backup and Migrate.

Dan melakukan Cron, Cron adalah script yang akan mengeksekusi suatu tugas secara otomatis dengan  interval waktu tertentu.

Sumber: http://bopfive5.blogspot.com

Membuat Tatto di Photoshop

Untuk membuat efek tattoo digital dengan Photoshop, Anda perlu mempersiapkan dulu desain tattoo yang akan Anda gunakan. Anda dapat mencarinya dengan bantuan Google.com.

Langkah pertama, buka kedua file dan drag & drop desain tattoo ke bagian tubuh model. Kemudian ubah blending modenya menjadi multiply dan atur posisi tattoonya menjadi seperti berikut.

Klik Menu Filter > Liquify (Shift+Ctrl+X).

Pada tampilan Liquify, pilih Forward Warp Tool (W) dan sesuaikan bentuk tattoo dengan bagian tangan model. Bila sudah, jangan lupa klik OK.

Klik Menu Image > Adjustments > Levels (Ctrl+L). Pada bagian Output Levels, geser slider hitam ke kanan hingga memberikan nilai kira-kira 70. Ini akan membuat warna tattoo menjadi tidak terlalu hitam, agar lebih menyesuaikan dengan kulit model yang berwarna cerah.

Sekarang beralih dari Channel RGB ke Channel Red. Masih pada bagian Output Levels, geser lagi slider hitamnya ke kanan hingga memberikan nilai kira-kira 30. Tujuannya, untuk memberikan warna kemerah-merahan pada tattoo sehingga lebih menyatu lagi dengan warna kulit model.

Lakukan masking pada bagian tattoo untuk memberikan sedikit transparansi pada bagian tattoo yang berbackground kulit model dengan highlight yang lebih cerah. Caranya, klik ikon Add layer mask dan sapukan Brush Tool (B) dengan warna hitam ke bagian tattoo yang berbackground kulit model dengan highlight yang lebih cerah. Gunakan brush dengan opacity kira-kira sebesar 50%.

Dan saya mendapatkan hasil akhir seperti ini. Goodluck!

Sumber : www.efekphotoshop.com

Contoh Perintah Dasar Html

HTML (HyperText Markup Language) adalah suatu bahasa yang menggunakan tanda-tanda tertentu (tag) untuk menyatakan kode-kode yang harus ditafsirkan oleh browser agar halaman tersebut dapat ditampilkan secara benar.

Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web.

Fungsi HTML yang lebih spesifik yaitu :

1. Membuat halaman web.
2. Menampilkan berbagai informasi di dalam sebuah browser Internet.
3. Membuat link menuju halaman web lain dengan kode tertentu (hypertext).

 Contoh Perintah Dasar HTML

<html>

<head>

<title> merdeka </title>

</head>

<body>

<font size="3" face="arial" color="red">Merdeka atau Mati</font>

</body>

</html>

<font></font>Mengubah jenis, warna, ukuran tulisan  

<b></b> atau <strong></strong> Teks tebal

<i> </i> atau <em></em> Teks miring 

<u> </u> Teks garis bawah

<pre></pre> Preformatted teks

 <h1></h1> Heading 1

 <h2></h2> Heading 2

 <h3> </h3> Heading 3 

  Subscript

  Superscript

 <ol><li></li></ol> Penomoran

 <ul><li></li></ul> Bullet  <marquee></marquee> Teks Berjalan

 <br />Berpindah baris

 <hr />Membuat garis horizontal

<img ... />Memasukkan gamba

 <ol> ordered list (data berurutan)

 <ul> unordered list  (data tdk berurutan)

 <meta .../>Menyisipkan informasi halaman.

<html>

<head>

<title> merdeka </title>

</head>

<body>

Sumber pelajaran berawal dari sini<Br> Dan mungkin akan berakhir di sana<Hr> <Br> Saya bisa pandai <Br> Jika saya belajar tekun di SMK TAGARI <Hr> <Br> Thank You <Hr>

</body>

</html>

1       <html>

2      <head>

3       <title> merdeka </title>

4      </head>

5       <body>

6        Sumber pelajaran berawal dari sini <Br> Dan mungkin akan berakhir di sana<Hr> <Br> Saya bisa pandai <Br> Jika saya belajar tekun di SMK TAGARI <Hr> <Br> Thank You  <Hr>

7      <H1> BAB,1 CERITA KITA </H1> <Br> isinya tentang kita <Br> <H2> sub bab cerita kita </H2>

8       <body bgcolor ="black"

9       <body text ="yellow"

1      </body>

1     </html>

Contoh Soal Html

LATIHAN SOAL HTML

KELAS XII REKAYASA PERANGKAT LUNAK

PEMOGRAMAN WEB DASAR

SoalPilihanGanda

1. WWW merupakansingkatandari ....

A. World Web Wide

B. Web World Wide

C. World Wide Web

D. Wide World Web

E. Word Wide Web

2. Perusahaan yang menyediakanlayanan

penyimpanan web danjual domain hosting

disebut ....

A. Web Crawler

B. Web Hosting

C. Web Company

D. Internet Service Provider

E. Web Domain

3. Berikutini yang bukanmerupakanweb

browseradalah ....

A. Mozilla Firefox

B. Internet Explorer

C. Netscape

D. Opera

E. Google

4. Domain .uk merupakan domain negara ....

A. Amerika

B. Singapura

C. Ukraina

D. Inggris

E. Malaysia

5. Klasifikasinama domain yang bergerak

dalamjasapenyedia internet adalah ....

A. org

B. edu

C. net

D. go.id

E. com

6. Klasifikasinama domain yang bergerak

dalambidangpendidikanadalah ....

A. edu

B. org

C. net

D. go.id

E. com

7. Dalampenulisan file HTML, teks yang

akanmunculpada title bar didefinisikan di

antara tag ....

A. <head>dan</head>

B. <title>dan</title>

C. <bar>dan</bar>

D. <title bar>dan</title bar>

E. <body>dan</body>

8. Contohpenulisan tag HTML danatribut

untukmenentukanwarnalatarbelakang

daribadandokumen yang benar ....

A. <body bgcolor= ”#red”>

B. <body background= ”red”>

C. <body bgcolor= ”#FFFFFF”>

D. <body bgcolor= ”#FFFFFF# “>

E. <body bgcolor= ”ff0022”>

9. Tag HTML yang digunakanuntuk

menandaisebuahparagrafdaridokumen

HTML yang dibuatadalah ....

A. <p>

B. <paragraf>

C. <paragraph>

D. <pg>

E. <prg>

10. Tag HTML yang digunakanuntuk

memisahkanteksmenjadibarisbaru

adalah ....

A. <hr>

B. <bb>

C. <teks>

D. <break>

E. <br>

11. Untukmembuatteksmenjadiseperti

angka 2 pada X2 dalam HTML digunakan

perintah ....

A. X<superscript>2</superscript>

B. X<subscript>2</subscript>

C. X²

D. X₂

E. <superscript>X2</superscript>

12. Untukmembuatteksmenjadiseperti

angka 2 pada X2 dalam HTML digunakan

perintah ....

A. X<superscript>2</superscript>

B. X<subscript>2</subscript>

C. X²

D. X₂

E. <superscript>X2</superscript>

13. Untukmembuatanimasiteksberjalandari

kirikekanandalamhalaman web

digunakanperintah ....

A. <marquee>teks</marquee>

B. <marquee direction=”left”>teks

</marquee>

C. <marquee direction=”right”>teks

</marquee>

D. <marquee><direction=”left”>teks

</direction></marquee>

E. <marquee><direction=”right”>teks

</direction></marquee>

14. Berikutinimerupakanatributpada table,

kecuali...

A. Bgcolor

B. Align

C. Width

D. Border

E. Font

15. Atributcolspandigunakanuntuk ....

A. Melebarkanbaris

B. Melebarkankolom

C. Melebarkanbarisdankolom

D. Membuat border kolom

E. Membuat border baris

16. Tag heading yang terkecildalam HTML

adalah ....

A. <h6>heading</h6>

B. <h5>heading</h5>

C. <h4>heading</h4>

D. <h2>heading</h2>

E. <h1>heading</h1>

17. Tag HR memilikiatribut ....

A. size

B. width

C. height

D. size dan width

E. size dan height

18. Tag <a>digunakanuntuk ....

A. Membuat hyperlink

B. Membuattabel

C. Memformatteksmenjaditercetak

miring

D. Memformatteksmenjaditercetaktebal

E. Memformatteksmenjaditercetak

bergarisbawah

19. Atribut FACE pada tag font digunakan

untuk ....

A. Menentukanwarnateks

B. Menentukanukuranhuruf

C. Menentukanketebalanteks

D. Menentukanposisiteks

E. Menentukanjenishuruf

20. Berikutiniadalahbentukatribut type pada

tag<ul>, kecuali....

A. disc

B. square

C. circle

D. disc dan square

E. number

21. Tag HTML yang digunakanuntuk

menampilkansebuahgambardalam

halaman web adalah ....

A. <img>

B. <image>

C. <jpg>

D. <bmp>

E. <gambar>

22. Tag HTML yang digunakanuntuk

menampilkansebuah video dalamhalaman

webadalah ....

A. <img>

B. <vid>

C. <video>

D. <embed>

E. <img vid>

23. Secaradefault, tipe ordered list yang

keluardalamhalaman web adalah ....

A. 1

B. i

C. I

D. ●

E. □

24. Agar barisataukolomdalamtabelsebuah

halaman web menjadikosongdigunakan

perintah HTML ....

A. &reg;

B. &amp;

C. &empty;

D. &none;

E. &nbsp;

25. Perintah<td valign=”top”> Isi sel</td>

berarti ....

3

A. Isi seldalamkolommenjadi rata atas

B. Isi seldalambarismenjadi rata atas

C. Isi seldalamkolommenjadi rata

bawah

D. Isi seldalambarismenjadi rata bawah

E. Isi seldalamkolomdanbarismenjadi

rataatas

26. Dalam form, isiatributdari type untuk

menerimamasukanberupapilihandengan

hanyasatupilihandalamsatuwaktu

adalah ....

A. text

B. password

C. checkbox

D. radio

E. checkbox dan radio

27. Perintah HTML dalam form yang

digunakanuntukmenerimamasukandari

penggunaberupabeberapabaristeks,

sepertikomentardalamguestbook adalah

....

A. <input type=”text”>masukan</input>

B. <input type=”radio”>masukan</input>

C. <form>masukan</form>

D. <select>masukan</select>

E. <textarea>masukan</textarea>

28. Tombol yang berfungsiuntuk

membatalkanpengisiandalam form adalah

....

A. RESET

B. SUBMIT

C. PRESET

D. UNDO

E. BUTTON

29. Contohpenulisanperintah HTML untuk

menjadikanbeberapabarisdalamtabel

menjadisatuadalah ....

A. <table colspan= ”3”>

B. <trcolspan= ”3”>

C. <td colspan= ”3”>

D. <trrowspan= ”3”>

E. <td rowspan= ”3”>

30. Belanjamelalui internet disebut ….

A. E-Commerce

B. E-Learning

C. E-Mail

D. E-Bay

E. E-Link

31. HTTP singkatandari ….

A. Hypertext Transformasi Protocol

B. Hypertext Transmit Protocol

C. Hypertext Transfer Provider

D. Hypertext Transfer Protocol

E. Hypertext Transfer Protocol

32. URL merupakansingkatandari ....

A. Uniform Resource Locator

B. Uniform Ring Locator

C. Uniform Ring Location

D. Universal Resource Location

E. Universal Riset Location

33. Proses mengambil data dari internet

disebut ....

A. Copy

B. Loading

C. Upload

D. Download

E. Get

34. Salah satufasilitas internet yang

dijalankanmelalui browser untukmencari

informasi yang diinginkanadalah…

A. Situs

B. Portal

C. Search Engine

D. Web Site

E. Spider

35. Attachment dalam email digunakanuntuk

....

A. Menulis email

B. Menghapusdokumen

C. Menambah email

D. Mengirim email

E. Melampirkandokumen

36. Untukmembalas email menggunakan

perintah ....

A. Reply

B. Forward

C. Composed

D. Send

E. Rename

37. Nama domain darialamat email

Okta_panggalo@yahoo.co.id adalah…

A. okta

B. panggalo@

C. @yahoo.co.id

D. yahoo.co.id

E. .co.id

38. Situs youtube.com dan blogger.com

merupakansitus yang dikembangkanoleh

perusahaan ....

A. Yahoo

B. Google

C. Microsoft

D. Oracle

E. Facebook

39. Situs search engine Bing.Com merupakan

situs yang dikembangkanoleh ....

A. Yahoo

B. Google

C. Microsoft

D. Oracle

E. Facebook

40. Berikutinimerupakancontohsitus

jejaringsosial (social networking), kecuali

....

A. Friendster

B. Facebook

C. Twitter

D. Myspace5

E. Kaskus

SoalUraian

1. Tulislahperintah-perintah HTML-nya

secaralengkap, agar diperolehbentuk

sepertiberikut.

Siswadanhobinya:

1. HobiBanu:

· MembacaKomik

· Nonton Film

2. HobbiCinta:

a. Menyanyi:

b. Jalan-jalan

3. HobbiSiska:

oMenari

oMemasak

jawaban no.1

1. HobiBanu:

<ultye "circle">

<li>MembacaKomik

<li>Nonton Film </ul>

2.HobiCinta:

<oltye "a">

<li>Menyanyi

<li>Jalan-jalan</ol>

3.HobiSiska:

<ultye "circle">

<li>Menari

<li>Memasak</ul>

</body>

</html>

2. Tulislahperintah-perintah HTML-nya

secaralengkap, agar diperolehbentuk

tabelsepertiberikut.

a.

Satu	Dua
Tiga	empat

Jawaban no.2a

<html>

<head>

<title>TugasNataniel</title>

</head>

<body>

<table border="1"

<tr>

<td width="200" height="100" align="center">Satu</td>

<td width="200" height="100" align="center">Dua</td>

</tr>

<tr>

<td width="200" height="100" align="center">Tiga</td>

<td width="200" height="100" align="center">Empat</td>

</tr>

</body>

</html>

b.

satu
Dua	tiga

Jawaban no.2b

<html>

<head>

<title>TugasNataniel</title>

</head>

<body>

<table border="1"

<tr>

<td colspan="2" width="200" height="100" align="center">Satu</td>

</tr>

<tr>

<td width="200" height="100" align="center">Dua</td>

<td width="200" height="100" align="center">Tiga</td>

</tr>

</body>

</html>

NatanielTappa