module 12 web development homework

• school Campus Bookshelves
• menu_book Bookshelves
• perm_media Learning Objects
• login Login
• how_to_reg Request Instructor Account
• hub Instructor Commons
• Download Page (PDF)
• Download Full Book (PDF)
• Periodic Table
• Physics Constants
• Scientific Calculator
• Reference & Cite
• Tools expand_more
• Readability

selected template will load here

This action is not available.

1.E: Web Development (Exercises)

• Last updated
• Save as PDF
• Page ID 3452

Create Your Own Server

• Download and install Wamp 2 or find a current Mac or Linux equivalent for your operating system.
• Follow the installation instructions for your system to complete the installation.
• Select the option, if available, to use an alternate port like :8080 if required by your campus network policy.
• Test your installation by navigating to 127.0.0.1:8080 (remove :8080 if you skipped step 3). You should see an image like the one below.
• Click on the phpinfo and phpmyadmin links to ensure PHP and MySQL are operational.
• Save this page using your browser’s File->Save As option and create an office document.
• Check the document to ensure it is readable and submit it as proof of your working server.
• Extra credit: Download, install and configure Apache, MySQL, and PHP separately then configure them to work together. You will need instructions for the versions you download that are appropriate for your operating system, and you will need to create a PHP configuration page (see Chapter 26) as the page you save to demonstrate everything works.

Draft a sitemap that meets the description provided below. Show the hierarchy and relationships between pages starting with the index page at the top. Create a digital copy of your sitemap using a word editor or visual editing programs like a mind mapping application or Visio. Be sure to save your document in a format that is widely supported and has a high enough resolution to be legible, like jpg, HTML, or pdf. Unless you are sure the parties who will receive these types of documents are using the same program you are, you should avoid proprietary file types.

“I would like my site to be fairly simple. We are opening a new and used store specializing in sports and exercise equipment, so I imagine our visitors will want to know where we are, what our hours are, and what we have on hand. They might also have questions about our trade-in policy and warranty, and I would like them to easily see how much money they could save by buying equipment from us.”

Note to the Professor: For a group-based approach to assignments, use this as a starting point to select which site that team of two or more will begin to create, or hold a vote/select a number of projects and create larger project groups to address this site throughout the semester. To build upon the material, these assignments can continue to focus and build on previous work. In teams of two, both students would experience the entire process from the view of the client as well as all aspects of development, by continuing to build their counterpart’s site.

Site Wireframe

Design two or three basic layouts for your site, or the alternative example described in the Site Map assignment, including a front page and typical content page for each. Include depictions of where certain pieces of content are expected to be located with their approximate size. Keep in mind a wireframe is about content elements and location, not a specific style, color, or actual content.

Include a brief description of which layout you would recommend of the three and why. Create your wireframe digitally using a word processor or visual editor as described under Site Proposal.

Storyboarding

Create a storyboard of a possible user experience your site. You might follow the process of signing in, creating an account, searching for a product, or navigating to a particular piece of content. Find an example that involves at least 4 steps. Create a mockup for each step that includes color and fake content, describing on each panel what action the user will follow to move to the next step.

Create your storyboard frames in a visual editor, saving them as images, and including them in a document editor so you can add your notes under each image.

Discussion / Written Response

• Compare three web hosting packages. Highlight the differences between their offerings in terms of cost, features, and resiliency. Declare which one you would select and why.
• Find a current article on net neutrality that discusses a proposed law, regulation, or agreement between governing entities. Defend the proposal or discuss why it is not in the best interest of consumers.
• Describe three different approaches to developing sites in teams. Include pros and cons of each method and detail when they are best suited for use.
• Describe the difference between APIs, frameworks, and templates.
• Find and describe an example of the Internet of Things in use today.
• Compare and contrast Windows, Mac, and Linux based operating systems.

b IPV4 uses 4 blocks of numbers.

c the application is layer 7, the network is layer 3, and data link is layer 2.

c Hypertext Pre-Processer is used now, and Personal Home Page was the original name.

b open source software is not always free, and users may not be able to profit from their changes.

b Not all open source products are free.

c Virtualization does not always mean improved performance Reduced hardware footprint by placing multiple systems onto one set of hardware is possible while reducing operating costs by utilities are lowered by using less physical hardware.

b It's not sharing files online because not everything online is part of a cloud.

b CompuServe is like AOL which was a means of accessing the Internet. DARPA is the government agency participated in its development.Al Gore is despite popular misconception, which is not true.

a Portable jump drives are not Internet devices, and portability does not define something as a cloud.

a It is already used in Russia-Georgia conflict.

b Only the compromised systems are part of a botnet, and viruses may help create the networks, but the collection of systems are not a virus.

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

This is module 12's project to the berkeley bootcamp

anirud314/employeeTable

Folders and files, repository files navigation, 12 sql: employee tracker, update 8/25/21.

I got the errors fixed with working with a tutor. All of my errors were related to messing up the connections for the inquirer. The issue was that I passed around the inputs and the data too many times for inquirer and it caused it not to take input correctly. so I got that fixed and after I fixed that I was able to start troubleshooting why the each command wasnt working. Turns out I switched naming conventions between what was already inputted into the skeleton code and what I was inputting. I basically let my shorthand defeat me. This was hard to troubleshoot for my tutor and i, and as i dont have time I wasnt able to finish the bonus material. I just let it console log a not functional message.

here is a screenshot gif of it working

Screenshots (Currently Failing):

NOTE IT IS CURRENTLY 12:01AM when submitting Will explain why.

Normally I would have ample time to work on this challenge and address questions regarding materials. However these past two weeks I have been overwhelmed starting a new job. I was unable to take time out of my day to focus on this weeks challenge because I was focused on my jobs training first. And this weekend I had a prior commitment that put me in an environment where I didnt have access to the internet which made it harder to do the work. I did not have ample enough time to set aside to work on this challenge, that being said I did try to do it as best as I could with those constraints, I was able to meet with my tutor and Iron out logistical questions about the subject and work on the project myself. I was able to better understand the how to set up a schema and what the point of having two seperate index.js files was meant for. I also was given a example seed I could use to test the project with. I understood that we used db/connection.js to establish a connection to the mysql environment. I understood that the db/index.js is used to design a class for the db items and provide functions that can be used to do CRUD operations to my table. I got all of that done after my tutoring session and they were working fine initially. It was when I started working on my driver code with inquirer where things got messy. I left this for last and this is what was causing me the most issues. In fact I think currently, I may have made some mistake with inquirer that Is causing me to not be able to move past the initial menu. I did what I could and have been facing weird errors. Now that I have ran out of time, I felt that its best that I just submit what I have and get partial credit if I can. I used up my skips, so there is nothing I can really do in this situation besides this.

UPDATE (12:25AM):

I plan to work on this more when I have time, I plan to update the readme more tomorrow and break down the code with comments later. I had to do alot of cleaning up of my code before I pushed it into the main branch and now I think it would be best to just go to sleep and comment and write my write up in more detail tomorrow.

Instructions

Developers are often tasked with creating interfaces that make it easy for non-developers to view and interact with information stored in databases. These interfaces are known as Content Management Systems (CMS). Your challenge this week is to build a command-line application to manage a company's database of employees using Node.js, Inquirer, and MySQL.

Because this application won’t be deployed, you’ll also need to provide a link to a walkthrough video that demonstrates its functionality and all of the acceptance criteria below being met. You’ll need to submit a link to the video and add it to the README of your project.

Acceptance Criteria

The following animation shows an example of the application being used from the command line:

Getting Started

You’ll need to use the MySQL2 package to connect to your MySQL database and perform queries, the Inquirer package to interact with the user via the command-line, and the console.table package to print MySQL rows to the console.

Important : You will be committing a file that contains your database credentials. Make sure your MySQL password is not used for any other personal accounts, because it will be visible on GitHub. In upcoming lessons, you will learn how to better secure this password, or you can start researching npm packages now that could help you.

You might also want to make your queries asynchronous. MySQL2 exposes a .promise() function on Connections to "upgrade" an existing non-promise connection to use promises. Look into MySQL2's documentation in order to make your queries asynchronous.

Design the following database schema containing three tables:

department:

id - INT PRIMARY KEY

name - VARCHAR(30) to hold department name

title - VARCHAR(30) to hold role title

salary - DECIMAL to hold role salary

department_id - INT to hold reference to department role belongs to

first_name - VARCHAR(30) to hold employee first name

last_name - VARCHAR(30) to hold employee last name

role_id - INT to hold reference to employee role

manager_id - INT to hold reference to another employee that is manager of the current employee. This field may be null if the employee has no manager

You may want to use a separate file containing functions for performing specific SQL queries you'll need to use. A constructor function or Class could be helpful for organizing these. You may also want to include a seeds.sql file to pre-populate your database. This will make the development of individual features much easier.

See if you can add some additional functionality to your application, such as the ability to:

Update employee managers

View employees by manager

View employees by department

Delete departments, roles, and employees

View the total utilized budget of a department -- ie the combined salaries of all employees in that department

You are required to submit BOTH of the following for review:

A walkthrough video demonstrating the functionality of the application.

The URL of the GitHub repository. Give the repository a unique name and include a README describing the project.

© 2021 Trilogy Education Services, LLC, a 2U, Inc. brand. Confidential and Proprietary. All Rights Reserved.

• JavaScript 100.0%

What's covered in this module

• Why Study Web Development
• What Languages Are Used for Web Development
• How to use Chrome Developer Tools

Simple HTML Markup

• How to use JSFiddle to make a simple web page
• Text editors and Your Work Flow

In this Module

Note to CSCI1450 students at Saint Paul College: The content you see here is similar to what is in the Module 1 slideshow, but does not include all of the class specific information about due dates and how to use D2L. It is better to use the slideshow. However, if you are looking for a slightly different explanation, you may find it here. Susan Metoxen

Why Study Web Development?

Web development is in-demand skill. As a Web Developer, you can have a career that pays well and at the same time do work that is meaningful and challenging.  This is Module 1 of a course that will teach you the languages you need to know as a Web Developer, including HTML, CSS, and some JavaScript.

Related Articles

• 10 Reasons Why You Should Study Web Development
• Careers in Web Design
• What Should I Study After HTML and CSS?

What skills will we be learning in this course?

Here is some language you will be able to add to your resume when you finish this course:

• Education: Front-end developer course work in HTML, CSS and some JavaScript/jQuery
• Skills: HTML, CSS, Bootstrap, Responsive Design and some JavaScript/jQuery
• Experience: Created a responsive website in native HTML and CSS at MyCoolWebsite.com

It doesn’t take long…

While it may seem like coding is difficult, by the end of the fourth week of class we will be able to make websites that look quite professional.

In Module 2 (Chapter 2) we learn about HTML. In Module 3 (Chapter 3) we add CSS and add some color to the website. In Module 4 (Chapter 4) we add images and the website looks professional. Even though coding may feel challenging at first, by the end of four weeks you will see some real progress!

What languages will we be learning?

• HTML “marks up” the text so that the browser knows how to display it. 
• CSS is used in combination with HTML to make websites beautiful.
• JavaScript adds interactivity

HTML, CSS and JavaScript are the three languages that are used by browsers. Other languages are used to make websites, like PHP, but they are compiled to HTML, CSS and JavaScript.

Programming vs. Developing

• HTML and CSS are markup languages
• They are not programming languages
• JavaScript is a programming language, and we will use some JavaScript frameworks and study JavaScript in Chapter 14

All languages are “coding” or “developing”.

Introducing Chrome Developer Tools

This video demonstrates how to use Chrome Developer Tools and gives a simple example of how you can edit CSS.

This video demonstrates how to use Chrome Developer Tools to view a website on various mobile devices.

The Chrome Developer Tools are a key resource that you will use as a Web Developer and problem solving for this course.

Exercise: Chrome Browser

• Download Chrome if you don’t have it
• Go to your favorite website
• Open the Inspector
• Make some changes
• Turn on the mobile view and see what the website looks like on mobile. 

Let’s dive right into coding!

While we will focus on learning HTML in Module 2, here is some simple HTML markup to give you an idea about what is coming. In this module we are only going to learn enough HTML to do the lab assignment.

HTML markup looks like this:

Take a moment to find the angle brackets and the forward slash on your keyboard. The HTML tags look like this:

The difference between the opening and closing tag is that there is a forward slash in the closing tag. You use the opening tag at the beginning of the text you want to mark up, and the closing tag at the end of it.

Heading Tags

There are six heading tags in HTML. In most web pages, you use one <h1> tag for the name of the page, and then at least a couple <h2> headings for subheadings. While the heading you choose changes the default font-size, the key to using heading is to use them to show the page organization, like in an outline.

In some of our lab assignments, we use the <h1> tag as the brand name (like a logo), in which case we use one <h2> for the title of the page, and <h3> for the sub headings.

On most websites, the <h4>, <h5> and <h6> tags are rarely used.

Paragraph and Bold Tags

Here are some simple tags you will use frequently:

<p> Use the <p></p> tags around a paragraph.

<b> Use the <b></b> tags around text you want to make bold.

<hr> Use the <hr> tag to draw a horizontal line. <hr> is a special type of tag called a self-closing tag. <hr> tags are a tool you can use to do a bit of decoration on your lab assignment.

Let’s Make a Simple Web Page!

This video demonstrates how to use JSFiddle to make a simple web page.

Take a few minutes to try this out yourself on JSFiddle.

• Go to JSFiddle.net
• In the HTML section type the code below, then click the run button in JSFiddle

When you complete this exercise, you page should look something like this:

The upper left section in black is where you type the HTML, and after you click the Run button you can see the result of your HTML in the lower right corner. In Module 3 we will start to add CSS to the top right section, and in Module 10 we will add some Javascript to the lower left section.

Using a Text Editor and Setting Up Your Workspace

What is a text editor.

• A text editor is a program used for editing plain text files.
• A word processor (Pages, Word) is not a text editor. They add markup you cannot see.

Download a Text Editor

• Sublime Text for Mac or PC (I’ll use this one for class demonstrations)
• Notepad ++ for PC
• Atom by Github
• If you don’t have a preference, then choose Sublime Text. I use Sublime Text for the class videos. 
• Feel free to use another text editor you are using for another programming course.
• Do not use TextEdit (Mac) or NotePad (without the ++). These will not work for coding.

The reason you can’t use TextEdit or NotePad (without the ++) is because they were designed for consumers, not for coding. For example, TextEdit or NotePad may change straight quotes into curly quotes, and in coding curly quotes do not work.

The Work Flow

This video demonstrates how to set up your desktop for coding, using Sublime Text as the text editor and Chrome Browser to view the result.

Your desktop should look like this while you are working:

With Sublime Text, you should open up the entire folder so you can see the folders and files in the left panel.

Exercise: Work Flow

Now it is time for you to try it.

1. Open your text editor. Set up your text editor on the left and the Chrome browser on the right. 

2. Create a new file called, index.html. Save the file.

3. Type a sentence

eg. “Never do anything that you wouldn’t want to explain to the paramedics.”

4. Check in a browser

5. Add <p> tags ↣ Check in a browser

6. Change the <p> tags to <h1> tags ↣ Check in a browser

And that’s the work flow we will use for class!

Note: In Module 1, we cover a barebones exposure to how HTML works. Web pages have a lot more code in them, and we will start to learn that other code in Chapter 2. The resume lab will need some retro-fitting if you choose to use it in your final project.

Wrapping Up

Now that you know a bit of HTML you are ready to do the Lab Assignment for this week. The lab assignment is to add mark up to your resume. Don’t worry if you don’t have a resume. There is a sample resume that you can use and perhaps can help you start your own resume. Web developers are professionals and so you will need a solid resume.

Lab 1: Marking Up a Resume

Frequently Asked Questions

Sublime Text is a great text editor and it works well on both Macs and Windows. Where I teach in person, Saint Paul College, the classroom computers have Notepad++ and I there are a couple features missing in Notepad++ that I love in Sublime Text. In Sublime Text its easier to open up the file in a browser with a simple right click. Also in Sublime Text, there is a way to look at the folders and files while you are working. Any text editor is fine for this course, except for Notepad (not ++) and TextEdit on a Mac.

It is always nice to support the developer. After all, if you are taking this class, you may one day be a developer. Even so, I thought the price was a bit steep at $99 per year so I use the free version. In my day-to-day work as a web developer, I use Dreamweaver, which I pay for through Adobe. Depending on what direction you go in your career and where you end up working will dictate what text editor you use most often in your career.

Final Project Websites

• Final Project Description
• Final Project Checklist

Additional Presentations

• The Template Lab (Between Module 6 and 7)
• Study for the HTML/CSS Exam
• PHP Websites
• The Best Internship

Bootstrap Starter Pack

This is a starter pack of Bootstrap HTML file using Bootstrap navigation. It includes a page with columns, a photo gallery (with modal pop-up) that automatically adjusts the number of images in a column based on the width of the screen, a slider, and responsive embedded video using Bootstrap.

Download Bootstrap 4 Template