Project

online information shared platform

responsible for google map implementation and the search engine for dorm buildings

won the first prize out of 16 teams in class

Deis Dorm https://deisdorms.herokuapp.com/

Deis Dorms (https://deisdorms.herokuapp.com/)                                    
Rails based dormitory info shared web service

§ Implemented web service with Ruby on Rails, jQuery and Bootstrap; 
interfaced with SQLite3 for Active Record; 
deployed web application onto Heroku

§ Used Google Maps API to visualize distribution of dorms; 
customized campus map with Dynamic Styling Data Layer and GeoJSON; 
utilized Ajax to present instant search results

§ Co-designed database schema; implemented user login/logout with bcrypt gem

Description

It is a ruby on rails web application for students to share information about dorms.

Responsible for dorm building visualization and its searching functionality

Implemented web service with Ruby on Rails, jQuery and Bootstrap

what is ruby on rails

open source, full-stack framework for building a web application

can work with multiple servers and database

MVC pattern

convention over configuration: name convention

full stack framework: all tool comes within

ruby treats everything as a object

jquery

jQuery is a JavaScript library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

<head>
<script type="text/javascript" src="jquery.js">
</script>
</head>

$(selector).action()

$("p").css("background-color","red"); //也可以改变css属性

Bootstrap

Bootstrap is a free and open-source front-end framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

Active Record

Active Record is the M in MVC

as a layer between our application and the database

In Active Record, objects carry both persistent data and behavior which operates on that data.

Rails Active Record is the Object/Relational Mapping (ORM) layer supplied with Rails. It closely follows the standard ORM model, which is as follows −

  • tables map to classes,
  • rows map to objects and
  • columns map to object attributes.

Active Record supports three types of associations: one-to-one, one-to-many, many-to-many

Object-Relational Mapping

ref: https://stackoverflow.com/questions/1279613/what-is-an-orm-and-where-can-i-learn-more-about-it

  • let you manipulate data like an object
  • use the same language, don't need to write SQL

(ORM) is a technique that lets you query and manipulate data from a database using an object-oriented paradigm. An ORM library is a completely ordinary library written in your language of choice that encapsulates the code needed to manipulate the data, so you don't use SQL anymore; you interact directly with an object in the same language you're using.

A ruby library to work with the relational SQL database like mySQL and Postgres.

Database

  • default database is SQLite (a lightweight serverless database application)
  • sqlite3 for development and testing, Postgres for production

SQLite3

A very powerful, embedded relational database management system.

pros:

  • file based: stores the entire database as a single file, extremely portable
  • doesn't need a server: really fast
  • great for developing and testing: fast and working with one single file is relatively simple

cons:

  • no user management: it doesn't have a higher-level of concurrency
  • Only allow write operation sequentially and will lock the entire database file during writing.

SQLite allows multiple processes to have the database file open at once, and for multiple processes to read the database at once. When any process wants to write, it must lock the entire database file for the duration of its update. However, client/server database engines (such as PostgreSQL, MySQL, or Oracle) usually support a higher level of concurrency and allow multiple processes to be writing to the same database at the same time.

when to use:

single-user local applications; application that read/write files to disk directly

when no to use:

multi-user applications: multiple clients need to access the same database.

applications that need to do write operation frequently because sqlite only allows one single write operation at a time

Heroku

Heroku is a cloud platform as a service (PaaS) supporting several programming languages.

Map Visualization

dynamic styling data layer: pass in geographic data in geojson format and add event listeners on the data layer.

shows the outline of each dorm building.

click: show basic info of buildings including pics and link to dorm building forum

Ajax

Asynchronous JavaScript and XML. With Ajax, can send and get data from the server without reloading the page

With AJAX, when you hit submit, JavaScript will make a request to the server, interpret the results, and update the current screen.

XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.

AJAX is based on the following open standards −

  • Browser-based presentation using HTML and Cascading Style Sheets (CSS).
  • Data is stored in XML format and fetched from the server.
  • Behind-the-scenes data fetches using XMLHttpRequest objects in the browser.
    • XMLHttpRequest: JavaScript object that performs asynchronous interaction with the server.
  • JavaScript to make everything happen.

Steps of AJAX Operation

  • A client event occurs.
  • An XMLHttpRequest object is created.
  • The XMLHttpRequest object is configured.
  • The XMLHttpRequest object makes an asynchronous request to the Webserver.
  • The Webserver returns the result containing XML document.
  • The XMLHttpRequest object calls the callback() function and processes the result.
  • The HTML DOM is updated.

MVC pattern

controller:

  • receive input from view (url);
  • process requests (get, post, put, delete)
  • get data from the model and pass data to the view

view: display data

model: database - migrate to apply the change to database, cannot be reversed

ruby gem file

ruby的插件，类似java里的包

bcrypt

bcrypt is a password hashing function. bcrypt() is a sophisticated and secure hash algorithm designed by The OpenBSD project for hashing passwords. The bcrypt Ruby gem provides a simple wrapper for safely handling passwords.

Detailed techniques

  • Gon Gem

在HTML include_gon，那么在JAVASCRIPT当中也可以用controller里定义的变量了

  • ajax

在search功能里面用到了

例子：新建一个文字1.txt,随便输入什么内容，新建HTML页面，点击页面里的按钮获取1.txt里面的内容

var oBtn = document.getElementById('btn');
oBtn.onclick =function(){
    var xhr;//创建Ajax对象
    if (window.XMLHttpRequest) {
          // code for IE7+, Firefox, Chrome, Opera, Safari
          xhr=new XMLHttpRequest();
      } else {// code for IE6, IE5
          xhr=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xhr.open('get','1.txt',true);//设置请求信息
    xhr.send();//提交请求
    //等待服务器返回内容
    xhr.onreadystatechange =function() {
    if( xhr.readyState == 4 
&
&
 xmlhttp.status==200) {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
}

使用Ajax的五大步骤

(http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp\)

(http://www.jb51.net/article/88084.htm\)

  1. 创建Ajax对象：看上图，根据版本的不同，对象也不同
  2. 使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器: xmlhttp.open(method,url,async)
    1. method包括get 和post： post 发送请求什么时候能够使用呢？ (1)更新一个文件或者数据库的时候。(2)发送大量数据到服务器，因为post请求没有字符限制。(3)发送用户输入的加密数据。 http://www.w3school.com.cn/tags/html_ref_httpmethods.asp
    2. url主要是文件或资源的路径，
    3. async参数为true(代表异步, 在等待期间，其他功能也可以使用)或者false（代表同步，必须等待直到结束)

  3. 使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。

  4. onreadystatechange函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用onreadystatechange函数，每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。
    onreadystatechange属性存储一个当readyState发生改变时自动被调用的函数。

  5. _.each

underscore.js library

results matching ""

    No results matching ""