image.png
HTML project 0

Note: Before starting this project, refer to the page link to setup your venus login home folder permissions and public_html folder. Whatever default folder you are given, create a public_html folder and assign it appropriate permissions. (chmod 755 ~) For Mac Users, refer to my website at http://venus.cs.qc.cuny.edu/~klee/ , choose CS111->Essentials Tab

To connect to the web server for uploading of your files, use either Hostname: mars.cs.qc.cuny.edu or IP Address: 149.4.211.180

http://cs12.cs.qc.cuny.edu/setupwebpage.html

This project requires any sample HTML Page to be hosted on the Venus Server. Rename it to index.html and save it in the public_html folder in your venus account.

In your index.html file, write Welcome to < >'s first HTML  page.

Submit the venus URL that links to your uploaded page that can be accessed from any network that have connection to the 'internet'.

You should be able to access your first web page at http://venus.cs.qc.cuny.edu/~< username>>

·

HTML project 1 : Setup A Profile Page and Host it in Venus

For this project, you will create and host your very own Professional Resume Profile page on Venus Server. (Similar to LinkedIn but a VERY BASIC version. The subsequent project after this will get harder and reuse this same page. You  need to complete this project before you can get credit for the other project.)

NOTE: DO NOT PUT IN ANY PERSONAL INFORMATION. (NO DATE OF BIRTH, ADDRESS, PHONE NUMBER… etc) Put only State, City and QC Student Email for Contact Details.

Your Resume Profile should consist of one of each requirements:

o A picture of yourself using the image tag centered on the page. Resize it to 250px by 250px.

o Inline CSS

o Internal CSS

o External CSS

o A hyperlink that allows the user to download a copy of your resume in pdf or word format.

o A hyperlink that shows your email address that when clicked tries to send an email to you.

o Have sections that a resume normally have: Name, Contact Details(Don't show personal details. Only show City, State, and Student Email Address), Professional Headline, Objective, Work Experience, Education, Skills, Awards/Certifications. You can google, use the Career Center or use pages like this to learn how to write a resume: https://www.careeronestop.org/JobSearch/Resumes/ResumeGuide/WritingYourResume/the-basic-elements.aspx

Use Unordered Lists for Sections in which you are listing your work experiences for each job you had.

Submit the project by posting the URL link to your hosted page on Venus.


·

HTML project 2 : Create Hyperlink on your Current Resume Page to the New Placeholder Page for project 3

Add a My Contacts hyperlink on your Resume Profile page to link to the Page you will be creating in HTML project 3. Call the HTML Page: HTMLproject3.html

Put this Hyperlink in an easy to find place in your current resume profile page.

The Content of HTMLproject3.html page should say: This is a future page I will be adding functionality later on.

Submit the URL of your current venus webpage and complete previous project to receive full credit for this project. (All projects in this category is cumulative)

Submission deadline is October 17, 2018. No extensions or makeups will be given.

·

HTML project 3 : Create a My Contacts Page and Link it to your Resume Profile Page


This project is about getting you some practice in adding or modifying data in your web application.

Instructions To Get Full Credit For This project:

0. Rename the filename HTMLproject3.html to MyContacts.html.

1. Then, change the hyperlink in your Resume Profile page to link to this new page. Rename the hyperlink to say My Contacts as well.

2. In MyContacts.html, the following contents need to be there:

a. A Centered Header That Says's Contact List

b. Display at least 5 contacts in your page. Use theHTML Tag to display your data.
c. The contacts defined in (b) need to be driven by a javascript variable called myContacts. This javascript variable should be an Array type.

d. Write the appropriate script that will populate and display the list of contacts in your javascript variable myContacts.

e. Your contacts HTML table need to have AT LEAST these columns (you can add more if you wish to): First Name, Last Name, City, State, Date of Birth, Age, Email

f. In the leftmost column, have a blank header but insert a Checkbox in each row. Hint: use the INPUT HTML tag.

g. You are NOT allowed to hardcode these column values directly into the HTML table. Your HTML table must use the myContacts variable to populate the table. (Column Headers are OK)

h. You are only allowed to hardcode the contact's attribute values inside the JAVASCRIPT variable myContacts.

i. Add three buttons to your page that have the following text. (New Contact, Delete Contact, Edit Contact) We will add full functionality to these buttons in the next project. Just make sure that you have these buttons for now.

j. Add a simple logic in the New Contact button to randomly generate a contact in your Contacts HTML table when clicked. This value should be added to your myContacts array variable that you have defined earlier.

k. Clicking on the Checkbox at the Column Header level should select ALL Contacts in your Contacts HTML table. Unchecking it should deselect/uncheck ALL Contacts in your Contacts HTML Table.

Submit the URL of your current venus webpage and complete previous project to receive full credit for this project. (All projects in this category is cumulative)

Submission deadline is October 22, 2018. No extensions or makeups will be given.

·

HTML project 4: Add More Functionality To Your Contacts Table

We will now add proper functionality to your Contacts HTML page from previous project.

Create a Copy of MyContacts.html and call it MyContacts2.html.

Modify MyContacts2.html file as follows to receive full credit:

3. Clicking the New Contact button should now bring up ONE "MODAL" Box/Dialog window that prompts the user to enter in the contact attribute values such as First Name, Last Name, City, State, Date of Birth, Age and Email… (Follow previous project's contact attributes). DO NOT CREATE A POPUP FOR EVERY SINGLE ATTRIBUTE to receive full credit. Use the "Modal Box" implementation in this link to help guide your user interface: https://www.w3schools.com/howto/howto_css_modals.asp

4. When user clicks on the Edit Contact button, the selected/checked Contact row should be editable by using the same interface you have created in the previous step #1 but in Edit mode. Make proper changes in your code to recognize the Add Contact state versus Edit Contact (Save Changes) state.

5. When user clicks on the Delete Contact button, the selected/checked Contact row should be deleted from your Contacts HTML table as well as from your myContacts variable.

6. Again, no hardcoding is allowed. Values shown in your Contacts HTML Table must strictly be derived from the myContacts variable you have defined in the previous project.

7. Add validations that prevent user from editing multiple contacts at the same time. Display a message to the user saying 'It is not possible to edit multiple contacts at the moment. We apologize for any inconvenience caused.'

8. Finally, modify the link in your main Resume Profile Page to refer to MyContacts2.html file.

More Hints:

Look at this link before proceeding to see how a Modal Box/Dialog is implemented. Look at its behavior.

Secondly, you must only use ONE "MODAL" Box/Dialog window that house all the required contact attributes along with a Add Contact/Save Changes and Cancel button.

You are NOT allowed to create a "popup" window for every single attribute of your contact.

Finally, the User Interface for your "Modal" Box/Dialog window should be exactly the same for both the Edit and Add buttons.

The only difference in the User Interface would be:

· In "Add" mode, the button should say "Add Contact", whereas

· In "Edit" mode, the button should say "Save Changes"

Employ proper object oriented design to receive full credit. Use your training from CSCI 212 and CSCI 313 to achieve this.

You are NOT allowed to clone the same user interface for these two different modes. IF you do that, you will NOT receive full credit. You must REUSE the same User Interface for both modes.

State Hint:

· Use a "state" variable to keep track of which mode the user intended to do.

· Using the "state" variable, change the text for button to reflect the mode.

· Use a single function for the button but use the "state" variable to perform different processing due to different modes.


Submit the URL of your current venus webpage and complete previous project to receive full credit for this project. (All projects in this category is cumulative)

Submission deadline is October 26, 2018. No extensions or makeups will be given.

·

HTML project 5: Saving Your Changes Using The Database

In this project, you will modify codes from your previous project to in order to remove any hardcoded data value.

Create a copy of MyContacts2.html file from previous project and name the file as MyContacts3.html

Modify codes to satisfy the following requirements in order to receive full credit for this project:

0. Use a stored procedure to retrieve all data for your Contacts HTML table.

1. Use a stored procedure to Add a New Contact to your database table. Invoke Stored Procedure from #1 to refresh your contacts list.

2. Use a stored procedure to Edit an existing Contact in your database table. Invoke Stored Procedure from #1 to refresh your contacts list.

3. Use a stored procedure to Delete one or more existing Contacts in your database table. Invoke Stored Procedure from #1 to refresh your contacts list.

4. The functionality of your contacts should remain unchanged. However, user should now see your updated changes to your contact list if they visit your page next time. (unlike previous project in which all changes are lost if they leave the page.)

5. Finally, modify the My Contacts hyperlink in your main Resume Profile page to refer to MyContacts3.html file.

Hint: Use the existing myContacts variable but do not hardcode the contact records in there anymore. Instead, use the database connection to populate the myContacts variable.

Submit the URL of your current venus webpage and complete previous project to receive full credit for this project. (All projects in this category is cumulative)

Submission deadline is October 31, 2018. No extensions or makeups will be given.




Database projects


Top of Form

Bottom of Form

·

MySQL project 0 : Check your MYSQL Credentials

Your MySQL login in Venus is the same as your venus login unless you have reset it.

Test your mysql connection once you have succeeded logging into Venus.

First test connecting to your database using ONLY command line executions outlined below:

1. Open any command prompt window

2. Type ssh@mars.cs.qc.cuny.edu

3. Enter your password. Press Enter. (don't worry about the GUI not showing your password)

4. Now, to connect to MySQL database, type: mysql -u-p

5. Enter your password. Press Enter. (don't worry about the GUI not showing your password)

6. You should be able to see the screen similar to the diagram below:

CommandLineMySQLConnection.png


Once you have successfully get connected to your db through command line, then you can consider downloading MySQL Workbench here:

https://dev.mysql.com/doc/workbench/en/wb-installing.html

I highly recommend storing your connection and password so that you don't have to retype your credentials each time. Choose Standard TCP/IP over SSH.

Refer to the diagram below for Workbench Setup:



·

MySQL project 1: Access your database and create MyContacts table in your database

Refer to previous project on how to connect to your MySQL Database.

Once you are connected in the command line interface, type Use; to connect to your database.

Then, refer to this MySQL Documentation in order to learn how to create a MyContacts Database Table:

https://dev.mysql.com/doc/refman/8.0/en/creating-tables.html

Read more about Fields/Columns Data Type here:

https://dev.mysql.com/doc/refman/8.0/en/data-types.html

Create the MyContacts Database Table that contains an ContactID field column that will act as your PRIMARY KEY plus ALL the fields you will need in your Venus – HTML projects. (First Name, Last Name…) Almost all of the table fields/columns can be of String types Except ContactID, Date Of Birth or Age.

Use AUTO_INCREMENT attribute for your Primary Key ContactID using examples shown in the following link.

https://dev.mysql.com/doc/refman/8.0/en/example-auto-increment.html

The MyContacts Table must exist in your Database to receive full credit.

·

MySQL project 2: Stored Procedures To Be Used By Your Web Application In Venus

First, refer to the syntax referenced on this page on how to define a Stored Procedure:

https://dev.mysql.com/doc/refman/8.0/en/stored-programs-defining.html

Then, create the following Stored Procedures that you will be invoking in your Web Application from Venus projects:

7. A Stored Procedure called spInsertNewContact that will INSERT a NEW record into your MyContacts database table. This stored procedure must accept as PARAMETER all FIELDS (First Name, Last Name….) in your MyContacts table EXCEPT the Primary Key ContactID

8. A Stored Procedure called spUpdateContact that will UPDATE an existing record in your MyContacts database table. This stored procedure must accept as parameter ALL fields in your MyContacts database table.

9. A Stored Procedure called spDeleteContact that will DELETE an existing record in your MyContacts database table. This stored procedure should accept only ONE parameter that contains the ContactID needed to delete the record.

10. A Stored Procedure called spGetAllContacts that will retrieve/return ALL records in your MyContacts database table. This stored procedure MUST return all field columns.

Only stored procedure that exists in your MySQL DB will be given credit.