INK Alitalya: Pemrograman

Tampilkan postingan dengan label Pemrograman. Tampilkan semua postingan

Sabtu, 12 Februari 2011

Membuat Desain Layout Sederhana dengan Pemanfaatan Division

Untuk menghasilkan desai web yang baik, tidak disarankan untuk menggunakan tabel, namun dengan memanfaatkan division.

jika ingin membuat desain web seperti di atas, sebelumnya kita buat dulu file CSS-nya. berikut kode CSS, disimpan dengan nama wrapper.css

#header{
    height: 80px;
    border: 1px solid black;}
#inner{float: left;margin: 5px 0;border: 1px solid black;}
    #content{
        float: left;
        width: 380px;
        height: 230px;
        border: 1px solid black;}
    #top {
        float: left;
        width: 544px;
        height: 100px;
        border: 1px solid black;}
    #right{
        float: right;
        width: 150px;
        height: 160px;
        border: 1px solid black;}
#sidebar{
    float: left;
    margin-right: 20px;
    width: 180px;
    height: 330px;
    border: 1px solid black;}
#footer {
    clear: both;
    height: 50px;
    border: 1px solid black;}
#wrapper{
    margin: auto;
    width: 750px;
    border: 1px solid black;}

Setelah itu kita buat kode HTML-nya

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional-dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Desain Layout dengan Division</title>
    <link rel="stylesheet" href="wrapper.css" type="text/css" />
</head>

<body>
    <div id="wrapper">
        <div id="header">Header</div>
        <div id="inner">
            <div id="sidebar">Sidebar</div>
            <div id="top">Top</div>
            <div id="content">Content</div>
            <div id="right">Right</div>
        </div>
        <div id="footer">Footer</div>
    </div>
</body>
</html>

Selamat mencoba..

Senin, 07 Februari 2011

Belajar Web

Belajar membuat web sederhana yang melibatkan elemen teks, garis, warna, dan gambar. Di mana terdapat garis berwarna, gambar dengan garis tepi (border), dan halaman utama dengan latar belakang gambar.

Berikut listing program dari web sederhana di atas:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">

<html>
<head>
<title>Pemrograman Berbasis Web</title>
</head>

<font color="blue"><h1 align="center">PendTIUM ANODE</h1> </font>
    <font color="yellow"><h2 align="center">WEB Sederhana</h2> </br> </font>
    <hr color="blue"> </hr>

<marquee><i><b><font color="red" size="10">Inge '<font color="Yellow">INK<font color="red">' Ratna Dwi Alitalya </font></b></i> <br /></marquee>

<font color="white">
    <pre> 
    |--------------------------------------------------------------------------------------|
    |Seorang mahasiswi Pendidikan Teknik Informatika Angkatan 2008    |
    |Nim : 108533411098                                                                           |
    |Offering A                                                                                            |
    |--------------------------------------------------------------------------------------|

</pre>
    <p>Inge adalah seseorang yang ingin selalu belajar lebih baik. </br>
    Seseorang yang banyak kekurangan, dan ingin menjadi individu yang bisa berguna bagi orang lain.</p> 
    <p>Buat halaman web sederhana yang melibatkan elemen teks, garis, warna, dan gambar. Di mana terdapat minimal sebuah heading dan garis berwarna, gambar dengan garis tepi (border), dan halaman utama dengan latar belakang gambar sembarang. </p>
    </font>

</body>
</html>

Membuat Karakter Ω dengan Bahasa C

Mungkin hasilnya belum maksimal, tapi semoga bermanfaat.

Berikut listing programnya:

#include <stdlib.h>

#include <glut.h>

void drawOhm (void) {

glClear(GL_COLOR_BUFFER_BIT);

//membuat karakter simbol "Ω"

glLineWidth(100);

glEnable(GL_LINE_SMOOTH);

glBegin(GL_LINE_STRIP);

glVertex2i(-310,-230);

glVertex2i(-100,-230);

glVertex2i(-112,-215);

glVertex2i(-125,-200);

glVertex2i(-135,-190);

glVertex2i(-150,-175);

glVertex2i(-162,-162);

glVertex2i(-175,-150);

glVertex2i(-190,-139);

glVertex2i(-205,-127);

glVertex2i(-220,-110);

glVertex2i(-230,-100);

glVertex2i(-245,-80);

glVertex2i(-253,-70);

glVertex2i(-265,-50);

glVertex2i(-273,-35);

glVertex2i(-278,-20);

glVertex2i(-280,0);

glVertex2i(-281,25);

glVertex2i(-280,50);

glVertex2i(-275,70);

glVertex2i(-267,88);

glVertex2i(-260,105);

glVertex2i(-250,120);

glVertex2i(-235,135);

glVertex2i(-220,150);

glVertex2i(-210,160);

glVertex2i(-200,168);

glVertex2i(-175,185);

glVertex2i(-150,200);

glVertex2i(-130,210);

glVertex2i(-100,220);

glVertex2i(-75,227);

glVertex2i(-50,230);//tengah

glVertex2i(50,230);

glVertex2i(75,227);

glVertex2i(100,220);

glVertex2i(130,210);

glVertex2i(150,200);

glVertex2i(175,185);

glVertex2i(200,168);

glVertex2i(210,160);

glVertex2i(220,150);

glVertex2i(235,135);

glVertex2i(250,120);

glVertex2i(260,105);

glVertex2i(267,88);

glVertex2i(275,70);

glVertex2i(280,50);

glVertex2i(281,25);

glVertex2i(280,0);

glVertex2i(278,-20);

glVertex2i(273,-35);

glVertex2i(265,-50);

glVertex2i(253,-70);

glVertex2i(245,-80);

//http://ingealitalya.co.cc

glVertex2i(230,-100);

glVertex2i(220,-110);

glVertex2i(205,-127);

glVertex2i(190,-139);

glVertex2i(175,-150);

glVertex2i(162,-162);

glVertex2i(150,-175);

glVertex2i(135,-190);

glVertex2i(125,-200);

glVertex2i(112,-215);

glVertex2i(100,-230);

glVertex2i(310,-230);

glEnd();

glFlush();

}

void main(int argc, char **argv) {

glutInit(&argc,argv);

glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA);

glutInitWindowPosition(100,100);

glutInitWindowSize(640,480);

glutCreateWindow("TUGAS Modul CG 2 Kelompok 12");

gluOrtho2D(-320.0,320.0,-240.0,240.0);

glutDisplayFunc(drawOhm);

glutMainLoop();

//http://ingealitalya.co.cc

}

Minggu, 19 Desember 2010

Antar Muka Mikrokontroler ATmega 8535 dengan Input Key pad dan Output Seven Segment

Berikut ini kita akan belajar tentang antar muka mikrokontroler ATmega 8535 dengan input keypad dan output Seven segment. kita akan membuat sebuah program dengan ketentuan: setiap keypad angka 7 ditekan, maka seven segment akan diincrement 1, sedangkan setiap keypad angka 9 ditekan, maka seven segment akan didecrement 1. Seterusnya seperti itu, dan jika ditekan angka 0, maka seven segment akan direset, dan menampilkan angka 0.

Alat dan bahan yang dibutuhkan adalah sebagai berikut:

1 set Personal Computer/Laptop yang sudah berisi program Code Vision dan Khazama
1 buah keypad 4x4
1 buah catu daya DC +5V
1 buah multimeter
1 buah ISP Downloader AVR
1 buah sistem minimum AVR
1 buah I/O
1 buah kabel printer USB
2 buah kabel pita hitam

Langkah-langkah:

a. Rangkailah peralatan yang diperlukan seperti dalam Gambar 10. Hubungkan soket jumper PORTA pada minimum system dengan soket jumper DATA7S pada I/O dan soket jumper PORTB pada minimum system dengan soket jumper I/P S KEY pada I/O. Sedangkan PORTD dihubungkan pada soket jumper Keypad.

b. Buka program Code Vision AVR.

c. Buatlah project baru dengan inisialisasi sehingga pada program bagian inisialisasi PORTA, PORTB dan PORTD terlihat sebagai berikut:

// Port A initialization

PORTA=0x00;

DDRA=0xFF; //ke data 7S

// Port B initialization

PORTB=0xF0;

DDRB=0xF0; //ke I/P S display

// Port D initialization

PORTD=0xFF;

DDRD=0x0F; //input keypad

d. Tuliskan dalam program utama sebagai berikut:

while (1)

{

PORTD = 0b11111011; //aktifkan baris3

delay_ms(100);

if(PIND.4==0) //tombol 7

{

PORTB.7=1;

PORTB.6=0;

kanan++;

PORTA=bil[kanan];

delay_ms(100);

}

if(PIND.6==0) //tombol 9

{

PORTB.7=1;

PORTB.6=0;

kanan--;

PORTA=bil[kanan];

delay_ms(100);

}

PORTD = 0b11110111; //aktifkan baris4

delay_ms(100); //tombol 0

if(PIND.5==0)

{

PORTB.7=1;

PORTB.6=0;

kanan=0;

PORTA=bil[kanan];

}

e. Tekan tombol keypad angka 7, 9 dan 0, amati nyala seven segment.

Selamat mencoba…

INK Alitalya

Tab Menu

Sabtu, 12 Februari 2011

Membuat Desain Layout Sederhana dengan Pemanfaatan Division

Senin, 07 Februari 2011

Belajar Web

Membuat Karakter Ω dengan Bahasa C

Minggu, 19 Desember 2010

Antar Muka Mikrokontroler ATmega 8535 dengan Input Key pad dan Output Seven Segment

About Me

You are my everything