-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathREADME.html
203 lines (199 loc) · 14.7 KB
/
README.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Regionalmeisterschaft IIIII0III0I</title>
<meta name="author" content="Fabian Vogler, Patrick Zahnd">
<script src="readme/javascripts/html5.js"></script>
<script src="readme/javascripts/jquery-1.9.0.min.js"></script>
<script src="readme/fancybox/jquery.fancybox.js"></script>
<link rel="stylesheet" media="screen" href="readme/stylesheets/baseline.compress.css">
<link rel="stylesheet" media="screen" href="readme/stylesheets/screen.css">
<link rel="stylesheet" media="screen" href="readme/fancybox/jquery.fancybox.css">
<script>
$(function() {
$('.fancybox').fancybox();
});
</script>
</head>
<body class="page-grid">
<div id="white"></div>
<div id="page">
<div class="full layout-grid">
<header class="column width4">
<div class="column unitx1 first">
<img src="readme/images/logo.png" width="107" height="90" alt="SwissSkills" />
</div>
<div class="column unitx3">
<h3>Regionalmeisterschaft IIIII0III0I</h3>
</div>
<div class="column unitx4 skill">
<h3>Application Development</h3>
</div>
</header>
<section class="column width2 first">
<div class="column width2 first">
<p>This document describes the tasks for the Regionalmeisterschaft 2013 in Application Development. You have 2 hours 30 minutes to complete as many tasks as possible without the use of the Internet or any other form of communication.
Each task has a short description, you’re expected to apply your knowledge and experience to implement your own solutions with the tools provided. You can use PHP or Java as a programming language.</p>
</div>
<div class="column width1 first">
<h4>Delivery Instructions</h4>
<p>After you have finished your work, export your complete database (structure and data) as SQL statements into a file called <em>database.sql</em>.</p>
<p>Make sure to delete the <em>software</em> folder before creating the ZIP file to save space. Create a ZIP file (named <em>RM2013_Surname_Prename.zip</em>) with all your application code, the <em>database.sql</em> and the filled out <em>competitior.txt</em> at the end of your work and copy it to the location given to you by your instructor.</p>
<h4>Rating Criteria</h4>
<p>Each task gets rated by the implementation of the required functionality of the task. In addition the following criteria apply to all tasks and must match your solution:</p>
<p><ul>
<li>All code is formatted and indented nicely.</li>
<li>Functions and methods are documented within the code (except getter and setter methods).</li>
<li>The generated output complies to the HTML5 specification.</li>
<li>SQL queries are protected against SQL injection attacks.</li>
<li>No system errors occur on the website.</li>
<li>Database access, input handling and output generation are separated.</li>
<li>The website practices good usability principles.</li>
</ul></p>
<h4>Infrastructre</h4>
<p>The following software is available for your implementation of this project in the <em>software</em> folder. Please make sure all needed software in installed on your computer or install them yourself before you begin with the implementation.</p>
<ul>
<li>Apache 2.4</li>
<li>MySQL 5.5</li>
<li>PHP 5.4</li>
<li>phpMyAdmin 3.5</li>
<li>Tomcat 7.0</li>
<li>Eclipse 4.2</li>
<li>Notepad++ 6.2</li>
<li>Mozilla Firefox 18.0</li>
<li>Firebug 1.11</li>
<li>Google Chrome 24</li>
</ul>
<p>Version 1.1</p>
</div>
<div class="column width1">
<h4>Project Description</h4>
<p>The project is a small social network called «Message Board» where people can sign up, connect with friends and share messages and photos with each other.</p>
<p>None of the functionality is done yet and needs to be implemented by you. You’re supposed to use the existing templates to complete the project.</p>
<h4>Manuals</h4>
<p>You can use the following manuals (available offline):</p>
<ul>
<li><a href="docs/php_manual.chm">PHP Manual</a></li>
<li><a href="docs/mysql_manual.chm">MySQL Manual</a></li>
<li><a href="docs/j2se6.chm">Java 6 API</a></li>
<li><a href="docs/j2ee6.chm">Java EE API</a></li>
<li><a href="docs/selfhtml.chm">SELFHTML</a></li>
<li><a href="docs/jqapi/index.html">JQuery</a></li>
<li><a href="bootstrap/docs/index.html">Bootstrap</a></li>
</ul>
</div>
</section>
<section class="column width2 tasks">
<div class="column unitx1 first">
<p> </p>
</div>
<div class="column unitx3">
<p>Before you start your work you have to provide your personal information inside the file <em>competitor.txt</em>. It’s then recommended to explore the <a href="design/index.html">design templates</a> of the application first, since it has already been implemented in HTML and is ready to be extended with functionality.</p>
</div>
<div class="column unitx1 first">
<h4>Task I: Database</h4>
<p style="text-align: right;">ca. 15 min</p>
</div>
<div class="column unitx3">
<p>The model of the application has different entities (message, photo and group) which are not implemented yet.</p>
<p>Your task is to create three new tables in the MySQL database according to the following ERM diagram. Define appropriate column definitions (data type, not null, default, auto increment, unique, foreign key, etc.).</p>
<p>Messages and photos can be posted into groups. A group consists of an ID and a name. Each group can have multiple messages and photos. A message consists of an ID, a textual message, the date it was posted, the author and the group it belongs to. A photo consists of an ID, a binary photo, the location it was taken, the date it was posted, the author and the group it belongs to.</p>
<p class="inline"> <br><a href="readme/images/erm.png" class="fancybox"><img src="readme/images/erm.png" height="103" alt="ERM"></a></p>
</div>
<div class="column unitx1 first">
<h4>Task I0: Group creation</h4>
<p style="text-align: right;">ca. 20 min</p>
</div>
<div class="column unitx3">
<p>You have to implement a group <a href="design/post-group.html">creation page</a>, so that a user can add a new group. The group has to be saved in the database.</p>
<p>The form submission has to be validated on the name length (between 3 and max database field length) and a check has to be implemented to prevent two groups with the same name.
The form validation displays user friendly notifications on wrong submissions.</p>
<p>After the group has been successfully created, the user gets redirected to the home page and a success message is displayed.</p>
</div>
<div class="column unitx1 first">
<h4>Task II: Messages</h4>
<p style="text-align: right;">ca. 40 min</p>
</div>
<div class="column unitx3">
<p>Messages have a <a href="design/post-message.html">submission form</a> and each message has its own <a href="design/message.html">detail page</a>. Messages have to be saved in the database too.</p>
<p>The first step is to implement the message submission form. The form fields have to be validated and the following validation errors have to be displayed in a user friendly way:</p>
<ul>
<li>Author name length is not between 3 and the max length of database field</li>
<li>Message text is empty</li>
<li>No valid group has been selected</li>
</ul>
<p>The second step is to create the <a href="design/message.html">detail page</a> for the messages. The page contains:</p>
<ul>
<li>Breadcrumb on top which links to the front page</li>
<li>Author name</li>
<li>Message text</li>
<li>Date of submission in the format dd.mm.yyyy</li>
<li>Group name</li>
</ul>
</div>
<div class="column unitx1 first">
<h4>Task I00: Photos</h4>
<p style="text-align: right;">ca. 30 min</p>
</div>
<div class="column unitx3">
<p>Like messages, photos have a <a href="design/post-photo.html">submission form</a> including a validation and an own <a href="design/photo.html">detail page</a>.</p>
<p>The first step is to implement the photo submission form. The form fields have to be validated and the following validation errors have to be displayed in a user friendly way:</p>
<ul>
<li>Author name length is not between 3 and the max length of database field</li>
<li>Photo file is not attached or format type is not jpeg or png</li>
<li>The optional location name is longer than the max length of database field</li>
<li>No valid group has been selected</li>
</ul>
<p>The photo detail page needs to contain the following elements:</p>
<ul>
<li>Breadcrumb on top which links to the front page</li>
<li>Author name</li>
<li>Picture, scaled to a maximum width of 700px</li>
<li>Location if given</li>
<li>Date of submission in the format dd.mm.yyyy</li>
<li>Group name</li>
</ul>
</div>
<div class="column unitx1 first">
<h4>Task I0I: Home page</h4>
<p style="text-align: right;">ca. 15 min</p>
</div>
<div class="column unitx3">
<p>The <a href="design/index.html">home page</a> displays all messages and photos from the database in a chronological order (newest first).</p>
<p>The first step is to fetch and display the messages in the left column. Each message is displayed as follows:</p>
<ul>
<li>Message text, shorten to an appropriate length (you have to decide yourself)</li>
<li>Submission date in the format dd.mm.yyyy and the author name, linked to the <a href="design/message.html">message detail page</a></li>
<li>Group name</li>
<li>Only the last 5 messages should be displayed (limit query)</li>
</ul>
<p>The second step is to fetch and display the photos in the right column. Each photo is displayed as follows:</p>
<ul>
<li>Picture, cropped to the exact format of 150x150px</li>
<li>The picture is linked to the photo <a href="design/photo.html">detail page</a></li>
<li>The picture link has a title-tag containing the author name and location if given</li>
<li>Only the last 6 photos should be display (limit query)</li>
</ul>
</div>
<div class="column unitx1 first">
<p> </p>
</div>
<div class="column unitx3">
<p><i>The following task is an optional task:</i></p>
</div>
<div class="column unitx1 first">
<h4>Task II0: Group detail page</h4>
<p style="text-align: right;">(optional)</p>
</div>
<div class="column unitx3">
<p>Each group has a separate <a href="design/group.html">group page</a> which shows only the messages and photos posted to that specific group.</p>
<p>Your task is to implement the page in the same way as the home page, but filtered by the group. The breadcrumb on the page links back to the home page.</p>
<p>Also implement the group dropdown in the upper right corner. It should displayed on all pages and list all groups, linked to their group pages.</p>
<p>As a last step link all group names of the messages and photos on their detail page and on the home page to the group page, as displayed in the design.</p>
</div>
</section>
</div>
</div>
</body>
</html>