Cotewad
-a project for Web Technologies course (June 2013)-
Description: Cotewad is a web application, a simple text editor (like Notepad) which offers support for users' collaboration. This application will have a few users, who can register/login with an email and a password. After the login step, the user will have a control panel, where he can upload, edit, delete and share files.
Technologies used: In order to create the Cotewad application, we used CodeIgniter ( MVC framework for php), Node.js and Share.js plugin, Bootstrap, and Dropbox API. Besides those technologies, we also used HTML5, PHP5, CSS and as a programming technique, we used AJAX.
- CodeIgniter is an open source, rapid development web application framework, for use in building dynamic web sites with PHP. Its goal is to enable developers to develop projects much faster than writing code from scratch, by providing a rich set of libraries for commonly needed tasks, as well as a simple interface and logical structure to access these libraries. CodeIgniter is loosely based on the popular Model-View-Controller development pattern. While view and controller classes are a necessary part of development under CodeIgniter, models are optional. Model–view–controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it. The model consists of application data, business rules, logic, and functions. A view can be any output representation of data, such as a chart or a diagram. Multiple views of the same data are possible, such as a bar chart for management and a tabular view for accountants. The controller mediates input, converting it to commands for the model or view. The central ideas behind MVC are code reusability and separation of concerns.
- Node.js is a server-side software system designed for writing scalable Internet applications, notably web servers. Programs are written on the server side in JavaScript, using event-driven,asynchronous I/O to minimize overhead and maximize scalability. Node.js contains a built-in HTTP server library, making it possible to run a web server without the use of external software, such as Apache or Lighttpd, and allowing more control of how the web server works. Node.js enables web developers to create an entire web application in JavaScript, both server-side and client-side.
- Share.js plugin has a very fast implementation for collaborative editing. ShareJS is an Operational Transform library for NodeJS & browsers. It lets you easily do live concurrent editing in your app.
- Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and other interface components, as well as optional JavaScript extensions. Bootstrap provides a set of stylesheets that provide basic style definitions for all key HTML components. These provide uniform, modern appearance for formatting text, tables and form elements. To use Bootstrap in an HTML page the developer downloads the Bootstrap CSS stylesheet and includes a link in the HTML file.
- The Dropbox API –all the files are connected through only one dropbox account (of tre he owner of the site). We chose this metod, and not every user on his own account, because in this way the users are not forced to insert theirs API security codes. The Core API exposes the fundamental building blocks that make up Dropbox. It's based on HTTP and OAuth, so it should be very familiar to most developers. There are faster and more powerful ways to integrate with Dropbox, such as the Dropbox Chooser and the Sync API, but if you need low level control, the Core API is the best choice.
- HTML5 is a markup language for structuring and presenting content for the World Wide Web and a core technology of the Internet. HTML5 introduces elements and attributes that reflect typical usage on modern websites. Some of them are semantic replacements for common uses of generic block (<div>) and inline (<span>) elements, for example <nav>(website navigation block), <footer> (usually referring to bottom of web page or to last lines of HTML code), or <audio> and <video> instead of <object>.
- Cascading Style Sheets 3 (CSS3) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. It
- PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language. PHP is a general-purpose scripting language that is especially suited to server-side web development where PHP generally runs on a web server.
- AJAX is a group of interrelated web development techniques used on the client-side to create asynchronous web applications. With Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page. Data can be retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not required (JSON is often used instead), and the requests do not need to be asynchronous. Ajax is not a single technology, but a group of technologies.
Application arhitecture: This web application will have a few users who will register/login with an email and a password. After the login process, the user will have something like a panel in which he will be able to upload, edit, delete and share files.
- The upload option: An user will be able to upload a new file. Immediately after the creation, the user will see that file into his panel.
- The edit option: This option will be collaborative. If two users open the same file, each one of them will be able to see any changes that the other user will make on the file.
- The delete option: An user will be able to delete his files. Immediately after the delete process, the user will see that chage into his panel.
- The share option: In order to share files, an user will generate a link which can be used to acces that file.
Details of implementation:
For the management of the Cotewad application, we will use a database with two tables. The first table, USERS, will contain the id, the email and the password for all the registered users. The password field will be encripted using md5 algorithm. The second table, SHARES, contains the keys for share.js connections, This tbale has an user_id, id, key, file fields.
Regarding the tehnical details of the application's implementation, we have two models: SET and GET.
- The GET model contains methods used for getting information from a database (the select statements).
- The SET model contains methods used for changing the database's data (update/insert/delete statements). An example of a method from the set model is the register function, which will insert an user into the users table from our database.
public function register($username, $password)
{
$data['username'] = $username;
$data['password'] = md5($password);
$this->db->insert("users", $data);
}
Another piece of code from Cotewad implementation:
$this->form_validation->set_rules('password', 'Password', "required");
if ($this->form_validation->run())
{
$this->set->insert_user($this->input->post('username'), $this->input->post('password'));
redirect(base_url('login'));
}
else
{
$this->load->view('register');
}
We use the portion of code from above, when a new user wants to register. The example will validate the input data, and only if it meet the criteria, the data will be sent to the register function from the set model.
