ROSNY GONYDJAJA PENGGUNAAN EMAIL, SEKILAS HTML,CSS,MYSQL PERTEMUAN 3 & 4.

Presentasi berjudul: "ROSNY GONYDJAJA PENGGUNAAN EMAIL, SEKILAS HTML,CSS,MYSQL PERTEMUAN 3 & 4."— Transcript presentasi:

1 ROSNY GONYDJAJA PENGGUNAAN EMAIL, SEKILAS HTML,CSS,MYSQL PERTEMUAN 3 & 4

2 PENGGUNAAN EMAIL

3 E-MAIL Email menjadi standar metode komunikasi internet saat ini. Komputer utama berfungsi seperti “Kantor pos” (mail server) dengan mengirim dan menerima e-mail untuk yang memiliki account. E-mail dapat ditampilkan melalui aplikasi e-mail seperti (Ms. Outlook, Eudora, Outlook Express dll) atau dari web based e-mail account (Yahoo, Gmail, Hotmail).

4 PENGGUNAAN E-MAIL DENGAN OUTLOOK EXPRESS MENSETTING OUTLOOK EXPRESS 1. Pertama silahkan anda buka Outlook anda

5 2. Klik menu Tools pada bagian atas  pilih Accounts MENSETTING OUTLOOK …

6 3. Kemudian akan mun- cul tampil- an seperti di samping ini  klik menu Mail kemudian anda klik Add MENSETTING OUTLOOK …

7 4. Setelah anda Add kemudian anda pilih menu Mail

8 MENSETTING OUTLOOK … 5. Isi Display Name dengan nama  klik Next

9 MENSETTING OUTLOOK … 6. Isi Email Address dengan alamat email  klik Next

10 MENSETTING OUTLOOK … 7. Isilah E-mail server names, POP3 server dan SMTP server dengan domain e-mail anda, contoh: e-mail anda: namae-mail anda@yahoo. com, jadi: yahoo.com  klik Next

11 MENSETTING OUTLOOK … 8. Pada Account name, memasuk- kan alamat e-mail anda dan pada Password, masukan password e- mail anda  klik Next

12 MENSETTING OUTLOOK … 9. Pen-settingan Outlook Express sudah selesai

13 MENSETTING OUTLOOK … 10. Cek e- mail anda sudah masuk Account jika sudah anda klik Finish, tetapi sebelum itu anda cek ulang semua apakah sudah benar atau belum

14 MENSETTING OUTLOOK … 11. Anda kembali lagi ke menu Tools kemudi- an Accounts

15 MENSETTING OUTLOOK … 12. Klik menu Mail  pilih Properties seperti pada tampilan di samping ini

16 MENSETTING OUTLOOK … 13. Setelah Anda milih menu tersebut nanti akan muncul tampil- an seperti di samping ini. Kemudian anda klik menu Server untuk mensetting Outgoing Mail Servernya

17 MENSETTING OUTLOOK … 14. Kemudian check list (√) menu My Server Requires Authenticati on  klik OK

18 MENARIK EMAIL DARI SERVER Untuk menarik semua e-mail anda ke Outlook Express agar dapat dilihat, anda kembali ke menu Tools lalu Send and Receive kemudian anda klik Receive All seperti pada gambar di bawah ini.

19 MENGIRIM EMAIL DENGAN OUTLOOK EXPRESS 1. Cara mengirim e- mail lewat Outlook Express anda pilih menu Create a new Mail message pada tampil- an awal Outlook Express

20 MENGIRIM EMAIL … 2.Setelah anda memilih menu tersebut akan muncul tampilan seperti di samping ini.

21 MENGIRIM EMAIL … 3. Pada menu To anda isi dengan alamat e-mail yang akan dituju,pada Subject anda isi subyek e-mail yang anda kirim, pada kolom bawah anda isi pesan e-mail akan yang anda kirim dan kemudian klik Send pada menu pojok kiri atas.

22 SETTING OUTLOOK UNTUK YAHOO! MAIL 1.Pastikan account anda adalah account yahoo lokal, contoh : nama@yahoo.co.id (penting), bukan yang yahoo.com, untuk yahoo.com harus ada tambahan software sebagai gateway yang bernama YPops. 2. Login ke Yahoo mail anda, klik Opsi yang ada di pojok kanan atas, lalu klik akses penerusan surat, lalu cek list bagian Akses Web & POP, lalu klik simpan. 3. Buka Outlook Express, Klik Tool -> Accounts -> Mail - lalu klik Add -> mail untuk membuat account. 4. Masukkan nama anda, nama ini akan digunakan sebagai nama pengirim di setiap email yg anda kirim. 5. Masukkan alamat email yahoo anda. ingat, yang.co.id bukan yang.com

23 SETTING OUTLOOK UNTUK YAHOO! MAIL 6. Isi Incoming mail… dengan : pop.mail.yahoo.com 7. Isi Outgoing mail… dengan : smtp.mail.yahoo.com, klik NEXT 8. Account Name : isi dengan Yahoo ID anda tanpa embel-embel @yahoo.co.id (cukup yahoo ID nya saja). contoh : email address=budi@yahoo.co.id -> berarti yahoo ID nya = budi 9. Masukkan password yahoo anda, dan ceklist bagian remember password. Klik NEXT, dan FINISH 10. Pilih Account yg baru saja anda buat, lalu klik properties. Pilih Tab Servers dan checklist bagian My server requires authentication 11. Klik OK. (Done…)

24 SEKILAS HTML

25 Markup : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana teks tersebut diinterpretasi, Markup ditambahkan bukan untuk tampilan tetapi untuk memberikan struktur interpretasi/pemberian arti HTML (HyperText Markup Language) merupakan subset dari SGML (Standard Generalized Markup Language) Spesifikasi HTML standar : http://www.w3.org/TR/html4 HTML merupakan suatu bahasa pemrograman yang menggunakan tanda-tanda tertentu (disebut sebagai tag) untuk menandai teks yang mempunyai interpretasi khusus. File HTML berupa file teks (plain text file), bukan binary file. HTML (HYPERTEXT MARKUP LANGUAGE)

26 PENULISAN HTML HTML adalah format standar untuk menulis dokumen web, contoh dokumen HTML: hasil tampilan :

27 PENULISAN HTML Browser HTML menginterpretasikan satu atau beberapa space yang berdekatan sebagai sebuah space teks teks teks teks dianggap sebagai : teks teks teks teks Browser HTML menginterpretasikan Carriage Return (Enter) dan indentasi (Tab) sebagai sebuah space. Ada beberapa karakter khusus yang dapat direpresentasi- kan dengan kode tertentu. – &nbsp ; spasi – &lt ; < – &gt ; > – &amp ; & – &quot ; "

28 SKEMA DASAR HTML Judul dokumen Isi dokumen

29 PENULISAN TAG Tag dibentuk oleh suatu kata (keyword) yang diapit oleh tanda kurung lancip ( ) Tag boleh ditulis dalam huruf kecil maupun kapital Tag harus berpasangan, yaitu tag awal diikuti tag akhir, kecuali tag tunggal teks, Di antara tag awal dan tag akhir bisa terdapat tag lain Penulisan tag tidak boleh tumpang tindih teks → penulisan salah teks → penulisan benar

30 TAG DASAR HTML: menandai awal dan akhir dokumen HTML dokumen Head: menandai bagian header dokumen HTML header Title: memberi judul pada dokumen HTML judul dokumen Body: menandai awal dan akhir isi dokumen isi dokumen <body text="#xxxxxx" bgcolor="#xxxxxx" background="filegambar" link="#xxxxxx" vlink="#xxxxxx">isi dokumen

31 TAG JUDUL (HEADING) Judul paragraf n = 1,2,3,4,5,6 (tingkat judul) Untuk menuliskan judul suatu paragraf

32 TAG PARAGRAPH paragraf Untuk menandai suatu paragraf. Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya.

33 TAG ATRIBUT 1 (BOLD, ITALIC, UNDERLINE) Kalimat yang dicetak tebal Kalimat yang dicetak miring Kalimat yang digarisbawahi Untuk menandai bagian kalimat agar dicetak tebal, miring, dan/atau digaris bawahi.

34 TAG ATRIBUT 2 (SUPERSCRIPT, SUBSCRIPT ) bagian yang dicetak tinggi bagian yang dicetak rendah Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk rumus matematika atau kimia.

35 TAG GANTI BARIS (BREAK LINE) Untuk pindah ke baris berikutnya. Bentuk penulisan lain yang dianjurkan (XML style) :

36 TAG FONT (SIZE) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color

37 TAG FONT (FACE) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color

38 TAG FONT (COLOR) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color

39 TAG GARIS MENDATAR (HORISONTAL LINE) membentuk garis pemisah mendatar. Bentuk penulisan lain yang dianjurkan (XML style) :

40 SEKILAS CSS

41 CASCADING STYLE SHEETS (CSS) CSS adalah suatu teknologi yang digunakan untuk memperindah halaman website (situs), dengan CSS dapat dengan mudah mengubah keseluruhan warna dan tampilan yang ada di situs sekaligus memformat ulang situs yang dibuat. CSS ini telah distandarkan oleh World Wide Web Consortium (W3C) untuk digunakan di web browser. Keuntungan CSS Dapat di-update dengan cepat dan mudah, karena cukup men- definisikan sebuah style-sheet global yang berisi aturan CSS tersebut untuk diterapkan pada seluruh dokumen HTML pada halaman situs. User yang berbeda dapat mempunyai style-sheet yang berbeda. Ukuran dan kompleksitas document code dapat diperkecil.

42 CASCADING STYLE SHEETS (CSS) Sebuah style sheet terdiri dari beberapa aturan (rules). Masing masing aturan terdiri dari satu atau lebih selektor (selector) dan sebuah blok deklarasi (declaration block). Sebuah blok deklarasi terdiri dari beberapa deklarasi yang dipisahkan oleh titik koma (;). Masing-masing deklarasi terdiri dari property, titik dua (:) dan nilai (value).

43 SELECTOR 1. Selektor dapat ditulis secara kelompok, dipisahkan dengan tanda koma. (GROUPING) Contoh : Semua elemen header akan ditampilkan dalam teks berwarna hijau.

44 SELECTOR… Mendefinisikan style yang berbeda untuk type elemen HTML yang sama (Class Selector) Contoh : Terdapat dua type paragraph dalam suatu dokumen : satu paragraf rata kanan, dan paragraf yang lain rata tengah. Atribut class harus digunakan dalam dokumen html.

45 SELECTOR… Untuk menerapkan lebih dari satu class per elemen, sintak-nya adalah : Nama tag dapat disertakan dalam selektor untuk mendefiniskan style yang akan digunakan oleh semua elemen HTML yang mem- punyai class tersebut. Contoh :

46 SELECTOR… Dalam kode berikut elemen h1 dan elemen p mempunyai class=“center”. Hal ini mempunyai arti bahwa kedua elemen akan mengikuti aturan dalam selektor “.center”

47 SELECTOR ID Pendefinisian style untuk elemen HTML dapat dilakukan dengan selector id. Selektor ID didefinisikan sebagai #. Contoh Aturan style berikut akan menyesuaikan elemen yang mempunyai sebuah atribut id dengan nilai “hijau”. Aturan style berikut akan sesuai dengan elemen p yang mempu- nyai id dengan nilai “para1”.

48 MEMASUKKAN STYLE SHEET 1.Eksternal Style Sheet Eksternal style sheet ideal ketika style diterapkan untuk bebe- rapa halaman. Dengan sebuah eksternal style sheet, perubahan untuk keseluruhan halaman web dilakukan dengan merubah satu file saja. Setiap halaman harus link ke style sheet meng- gunakan tag

49 CONTOH

50 MEMASUKKAN STYLE … 2. Internal Style Sheet Internal style sheet seharusnya digunakan ketika dokumen tunggal mempunyai style unik. Pendefinisian internal dalam bagian head dengan menggunakan tag.

51 CONTOH

52 MEMASUKKAN STYLE … 3. Inline Style Inline styles digunakan dengan menggunakan atribut style dalam tag yang relevan. Atribut style dapat berisi beberapa properti CSS.

53 MEMASUKKAN STYLE … 4. Multiple Style Sheet Jika beberapa properti telah diset untuk selektor yang sama dalam style sheet yang berbeda, nilai akan diwariskan dari style sheet yang lebih khusus. Sebuah external style sheet mempunyai properti sebagai berikut: Dan sebuah internal style sheet mempunyai properti untuk selektor h3 adalah: Jika halaman dengan internal style sheet juga me-link ke eksternal style sheet, maka properti h3 akan menjadi:

54 FONT PROPERTY Font Syntax: font: Possible Values: [ || || ]? [ / ]? Contoh: P { font: italic bold 12pt/14pt Times, serif } Font Size Syntax: font-size: Possible Values: | | | :xx-small | x-small |small|medium| large|x-large | xx-large : larger | smaller (in relation to parent element)

55 FONT PROPERTY … Font Style Syntax : font-style: Possible Values: normal | italic | oblique Font Variant Syntax : font-variant: Possible Values: normal | small-caps Font Weight Syntax : font-weight: Possible Values : normal | bold | bolder | lighter | 100 | 200 | 300 |400 | 500 | 600 | 700 | 800 | 900

56 CONTOH CSS

57

58 COLOR & BACKGROUND PROPERTY Color Syntax : color: Nilai (value) dari color adalah sebuah keyword atau sebuah kode RGB. 16 keyword diambil dari palette Windows VGA: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Ada 4 cara dalam menuliskan warna menggunakan kode RGB: #rrggbb (e.g., #00cc00) #rgb (e.g., #0c0) rgb(x,x,x) dimana x adalah integer antara 0 dan 255 (e.g., rgb(0,204,0)) rgb(y%,y%,y%) dimana y adalah nomor antara 0.0 dan 100.0 (e.g., rgb(0%,80%,0%))

59 COLOR & BACKGROUND PROPERTY … Background Color Syntax : background-color: Possible Values: | transparent Background Syntax : background: Possible Values: || || || ||

60 CONTOH CSS

61 SEKILAS MYSQL

62 PENDAHULUAN Dalam bahasa SQL umumnya informasi tersimpan dalam tabel, yang secara logik merupakan struktur dua dimensi terdiri dari baris (row atau record) dan kolom(column atau field). Sebuah database dapat terdiri dari beberapa tabel. Beberapa tipe data dalam MySQL yang sering dipakai:

63 MEMBUAT DATABASE DAN TABEL Masukkan perintah berikut pada program MySQL : C:\> MYSQL (Enter) Akan muncul tampilan MySQL seperti di bawah ini: Bentuk prompt “mysql>” adalah tempat menuliskan perintah MySQL. Setiap perintah SQL harus diakhiri dengan tanda titik- koma “;”.

64 MEMBUAT DATABASE DAN TABEL Perintah untuk membuat sebuah database baru adalah : create database nama_database; Contoh : create database privatdb; Perintah untuk membuka sebuah database adalah: use nama_database; Contoh : use privatdb; Perintah untuk membuat tabel baru adalah: create table nama_tabel ( struktur );

65 Misalkan untuk menyimpan data anggota yaitu: nomor, nama, email, alamat, kota. Strukturnya seperti tabel di bawah ini: CONTOH MEMBUAT DATABASE DAN TABEL

66 Perintah MySQL untuk membuat tabel seperti di atas adalah: create table anggota( nomor int(6) not null primary key, nama char(40) not null, email char(255) not null, alamat char(80) not null, kota char(20) not null); Untuk memasukkan sebuah baris (record) ke dalam tabel MySQL adalah sebagai berikut: insert into namatabel values(kolom1, kolom2, kolom3,…); Contoh: insert into anggota values(‘1’,’Arini Nurillahi’, ’arini@hotmail.com’, ’Jl.Lebak Rejo 7’,’Surabaya’); CONTOH MEMBUAT DATABASE DAN TABEL …

67 Isi tabel dapat ditampilkan dengan perintah SELECT, penulisan perintah SELECT adalah: select nm_kolom from nama_tabel; MENAMPILKAN ISI TABEL

68 MENGHAPUS BARIS (RECORD) Untuk menghapus suatu record dengan kriteria tertentu digunakan perintah sebagai berikut: delete from nama_tabel where kriteria; Contoh: Menghapus record dari tabel anggota yang bernomor ‘3’ delete from anggota where nomor=’3’;

69 MODIFIKASI BARIS (RECORD) Untuk memodifikasi (mengubah) isi record tertentu digunakan perintah sebagai berikut: update nama_tabel set kolom1=nilaibaru1, kolom2=nilaibaru2 … where kriteria; Contoh: Mengubah email anggota yang bernomor 12 menjadi ‘supri@yahoo.com’ dalam tabel anggota. update anggota set email=’supri@yahoo.com’ where nomor=’12’;

70 MENGHUBUNGKAN PHP DENGAN MYSQL Script PHP yang dibuat dapat berhubungan dengan database dari MySQL dengan menggunakan fungsi berikut ini: File utama.php: <?php function open_connection() { $host=”localhost”; $username=”root”; $password=””; $databasename=”privatdb”; $link=mysql_connect($host,$username,$password) or die ("Database tidak dapat dihubungkan!"); mysql_select_db($databasename,$link); return $link; } ?> Isi variabel $host, $username, $password dan $databasename dapat disesuaikan dengan setting pada MySQL server yang ada.

71 MENGHUBUNGKAN PHP DENGAN MYSQL … Contoh: tampilkan data anggota yang telah dibuat dengn script PHP File contoh1.php: <?php // ----- ambil isi dari file utama.php require("utama.php"); // ----- hubungkan ke database $link=open_connection(); // ----- menentukan nama tabel $tablename="anggota"; // ----- perintah SQL dimasukkan ke dalam variable string $sqlstr="select * from $tablename"; // ------ jalankan perintah SQL $result = mysql_query ($sqlstr) or die ("Kesalahan pada perintah SQL!");

72 // ------ putus hubungan dengan database mysql_close($link); // ------ buat tampilan tabel echo("<table width=100% cellspacing=1 cellpadding=2 bgcolor=#000000>"); echo(" No <td bgcolor=#CCCCCC>Nama <td bgcolor=#CCCCCC>E-Mail <td bgcolor=#CCCCCC>Alamat <td bgcolor=#CCCCCC>Kota "); // ------ ambil isi masing-masing record while ($row = mysql_fetch_object ($result)) { // ----- mengambil isi setiap kolom $nomor=$row->nomor; $nama=$row->nama; $email=$row->email; $alamat=$row->alamat; $kota=$row->kota;

73 // ------ menampilkan di layar browser echo(" $nomor $nama <td bgcolor=#FFFFFF>$email $alamat <td bgcolor=#FFFFFF>$kota "); } echo(" "); ?>

74

75 SELESAI

76 MATERI NANTI DI DOWNLOAD DARI STAFFSITE SAYA : STAFFSITE.GUNADARMA.AC.ID (MULAI HARI KAMIS)