วันอาทิตย์ที่ 17 มกราคม พ.ศ. 2559

Install Django in ubuntu

Install Django in ubuntu

1 ให้เปิด terminal ขึ้นมา แล้วตามด้วยคำสั่ง
 
  sudo add-apt-repository ppa:fkrull/deadsnakes
  sudo apt-get update
  sudo apt-get install python2.7
 
2 ทำการติดตั้ง Libary
 
  sudo apt-get install libreadline-gplv2-dev libncursesw5-dev libssl-dev libsqlite3-dev tk-dev libgdbm-dev libc6-dev libbz2-dev
 
 3 ทำการติดตั้ง Connector Python กับ Mysql
 
  sudo apt-get install python-mysqldb
 
  จากนั้นก็
 
  sudo apt-get install python-pip

  sudo pip install django

  sudo apt-get install python-setuptools python-pip
 
 อ้างอิงจาก : https://djangoweekly.wordpress.com

ทดลอง สร้างโปรเจ็คใน Django

1 เปิด terminal ขึ้นมา แล้วเข้าไปที่ จากนั้นเลือกไดเร็กทอรี่ที่ต้องการสร้างโปรเจ็ค
2 จากนั้น พิมพ์คำสั้งในการสร้างโปรเจ็ค
 
  django-admin.py startproject mysite

จะมีโฟนเดอร์ mysite เกิดขึ้น โดย จะมีไฟล์
  • __init__.py  เป็นไฟล์ เปล่า ๆ เพื่อบอกว่า โฟนเดอร์นี้คือ ไฟล์ของ Python นะ 
  • manage.py  เป็นไฟล์ ควบคุมการทำงานต่าง ๆ ใน Project Django ที่กำลังจำทำต่อไปนี้ 
  • settings.py  เป็นไฟล์ ที่เก็บค่า Config ต่าง ๆ เช่นการเชื่อมต่อ Database, การควบคุมการทำงานของ Function 
  • urls.py  เป็นไฟล์ ควบคุมการทำงานของ URL การเรียก url จาก Browser ต่าง ๆ  เช่นhttp://www.mysite.com/xxx  ตัว urls.py จะเป็นตัวบอกว่า xxx จะไปเรียกหน้าไหนออกมา 


 3 ทดสอบการทำงาน โดยพิมพ์คำสั้ง ใน ไดเร็กทอรี่ mysite
 
  python manage.py runserver

จากนั้นให้เปิด browser  แลวเข้าไปที่ 127.0.0.1:8000  จะพบกับ “Welcome to Django”

Exercise W-1-2 calculate บวก ลบ คูน หาร .CGI ด้วย Python

localhost:8000/cgi-bin/hello.cgi

โครงสร้างของ HTML

 
  #!/usr/bin/env python
  # -*- coding: UTF-8 -*-
  #!/usr/bin/python
  import cgi

  print "Content-type: text/html;charset=utf-8 \n\n"

  print "<html>"
  print "<head><title>Test Calculate</title></head>"
  print "<body>"
  print """ <div align="center"><font color="DodgerBlue3" size="25" face="Comic Sans MS"><b>
        Building Software Systems II
       </b></font></div>
   """
  print """ <div align="center"><font color="DodgerBlue3" size="5" face="Comic Sans MS"><b>
      การพัฒนาระบบซอฟต์แวร์ 2
     </b></font></div>
   """
  print '<div align="center"><h1>Hello Calculate Program!</h1></div>'

  print '<div align="center"><form method="post" action="hello.cgi">'
  print '<p><input type="text" name="input1"/></p>'
  print '<input type="submit" name="+" value="บวก"/>'
  print '<input type="submit" name="-" value="ลบ"/>'
  print '<input type="submit" name="*" value="คูณ"/>'
  print '<input type="submit" name="/" value="หาร"/>'
  print '<p><input type="text" name="input2"/></p>'
  print '</form></div>'

  form = cgi.FieldStorage()
  input1 = form.getvalue("input1")
  input2 = form.getvalue("input2")
  print '<div align="center">'
  try: 
       if form.getvalue("+"):
            print '<h1>'+input1+" + "+input2+" = "+str(int(input1)+int(input2))+'</h1><br/>'
       elif form.getvalue("-"):
            print '<h1>'+input1+" - "+input2+" = "+str(int(input1)-int(input2))+'</h1><br/>'
       elif form.getvalue("*"):
            print '<h1>'+input1+" * "+input2+" = "+str(int(input1)*int(input2))+'</h1><br/>'
       elif form.getvalue("/"):
            if int(input1) == 0 or int(input2) == 0:
                 print '<h1>Error</h1>'
            else:
                 print '<h1>'+input1+" / "+input2+" = "+str(float(input1)/float(input2))+'</h1><br/>' 
        except:
   print '<h1>Input Error</h1>'

  print '</div>'
  print "</body>"
  print "</html>"

ผลการทดสอบ

Input 3 + 6 
 Input 39 - 19
 Input 3 - 22
 Input 5 * 20
 Input 0 / 10
 Input 5 / 8
 Input 4 + y

HTML Basic คำสั่ง tags เบื้องต้น

โครงสร้างของ HTML

 
  <html>
    <head>
    <title>.........</title>
    </head>

    <body>
    </body>
  </html>
 

เกี่ยวกับรูปแบบ

 
  <br> : เว้นบรรทัด

  &nbsp; : เว้นวรรค

  <div align="left">ข้อความ</div> : ข้อความชิดซ้าย

  <div align="right">ข้อความ</div> : ข้อความชิดขวา

  <div align="center">ข้อความ</div> : ข้อความอยู่กลาง

  <center>ข้อความ</center> : ข้อความอยู่กลาง
 

เกี่ยวกับสีสันข้อความ

 
  <b>ข้อความ</b> : ตัวหนา

  <strong>ข้อความ</strong> : ตัวหนา

  <i>ข้อความ</i> : ตัวเอียง

  <em>ข้อความ</em> : ตัวเอียง

  <u>ข้อความ</u> ขีดเส้นใต้

  <font size="10">ข้อความ</font> : ขนาดข้อความ

  <font color="#000000">ข้อความ</font> : สีข้อความ

  <font color="#000000" size="10">ข้อความ</font> : ขนาดและสีข้อความ
 

เกี่ยวกับรูปภาพ

 
  <img src="url"> : ใส่รูป

  <img src="url" width="100px" height="100px"> : ใส่รูป แบบ กำหนดขนาด

  <img src="url" border="3" border-color="#000000"> : ใส่รูป แบบ กำหนกขนาดและสีเส้นขอบ

  <img src="url" ait="ข้อความ"> : ใส่รูป แบบ เวลาเอาเมาไปชี้แล้วมีข้อความขึ้นมา
 

เกี่ยวกับ Link


 
  <a href="url">ข้อความ</a> : ลิ้งโดยใช้ข้อความ

  <a href="url"  target="_blank">ข้อความ</a> : ลิ้งโดยใช้ข้อความ แบบเปิดหน้าต่างไหม่

  <a href="url"><img src="url รูป"></a> : ลิ้งโดยใช้รูปภาพ
 
  <a href="url"  target="_blank"><img src="url รูป"></a> : ลิ้งโดยใช้รูปภาพ แบบเปิดหน้าต่างไหม่
 

เกี่ยวกับ marquee หรือข้อความเลื่อน

 
  <marquee>ข้อความ</marquee> : ข้อความเลื่อนจากขวาไปซ้าย

  <marquee direction="left">ข้อความ</marquee> : ข้อความเลื่อนจากขวาไปซ้าย

  <marquee direction="right">ข้อความ</marquee> : ข้อความเลื่อนจากซ้ายไปขวา 

  <marquee direction="up">ข้อความ</marquee> : ข้อความเลื่อนจากล่างขึ้นบน

  <marquee direction="down">ข้อความ</marquee> : ข้อความเลื่อนจากบนลงล่าง

  <marquee width="100px" height="100px">ข้อความ</marquee> : ข้อความเลื่อน แบบ กำหนดความกว้าง

  <marquee bgcolor="#00CC99">ข้อความ</marquee> : ข้อความเลื่อน แบบ กำหนดสีพื้นหลัง

  <marquee scrollamount="1">ข้อความ</marquee> : ข้อความเลื่อน แบบ กำหนดความเร็ว

  <marquee behavior="alternate">ข้อความ</marquee> : ข้อความเลื่อน แบบ ไปกลับ

  <marquee behavior="slide">ข้อความ</marquee> : ข้อความเลื่อน แบบ ไปรอบเดียว 
 

เกี่ยวกับ marquee หรือรูปเลื่อน

 
  <marquee><img src="urlรูป"></marquee> : รูปเลื่อนจากขวาไปซ้าย

  <marquee direction="left"><img src="urlรูป"></marquee> : รูปเลื่อนจากขวาไปซ้าย

  <marquee direction="right"><img src="urlรูป"></marquee> : รูปเลื่อนจากซ้ายไปขวา

  <marquee direction="up"><img src="urlรูป"></marquee> : รูปเลื่อนจากล่างขึ้นบน

  <marquee direction="down"><img src="urlรูป"></marquee> : รูปเลื่อนจากบนลงล่าง

  <marquee width="100px" height="100px"><img src="urlรูป"></marquee> : รูปเลื่อน แบบ กำหนดความกว้าง

  <marquee bgcolor="#00CC99"><img src="urlรูป"></marquee> : รูปเลื่อน แบบ กำหนดสีพื้นหลัง

  <marquee scrollamount="1"><img src="urlรูป"></marquee> : รูปเลื่อน แบบ กำหนดความเร็ว

  <marquee behavior="alternate"><img src="urlรูป"></marquee> : รูปเลื่อน แบบ ไปกลับ

  <marquee behavior="slide"> <img src="urlรูป"> </marquee> : รูปเลื่อน แบบ ไปรอบเดียว 
 

อ้างอิงจาก : https://www.selenic.com/mercurial/hg.1.html