Exercise Thursday

Goal: Keep making Silex apps which allow you to create, save and delete objects, while using Twig templates. Don't forget to make regular Git commits and include a README in your project.

Warm Up


  • What does MVC stand for?
  • How does the concept of an MVC inform how we think about our Silex apps?

Code


Dealership

Let's go and improve your car dealership app now that you know how to save objects and use Twig! You and your pair can decide whose version of the app you want to work on. Then you are going to get the code from your github repository onto your computer for you to work on, and then you can continue making commits as usual and push the finished version of the project to both your github accounts.

To continue to work on an existing repository:

  • Go to your repository in github and copy the HTTPS URL that you use when running the git remote add command.
  • In Finder, create a new folder named after the project you're about to work on.
  • In Terminal, cd into your new folder as if you were creating a new repository.
  • Run the command git clone https://github.com/dianedouglas/TicTacToe.git . replacing my URL with your own. The . at the end of the command means "put the project into the current directory."
  • Run the git pair commands to assign you both as authors.
  • Go back to running git add . and git commit -m "My message" as you work.
  • When you are finished, push it back to the repository you got it from by running the command git push origin master.
  • Copy the project to the other person's github account by having them create a new repository in their account in Chrome, and then running the git remote add name [URL] and git push name master commands just like we've been doing.

Add Twig templates to your app instead of outputting HTML directly.

Then add a page to your Car Dealership app to let users selling cars post an add on your page by creating a Car object. They should fill out a form with the car's price, mileage, make / model, and a URL to a picture of it.

Add the code to save all the Car objects inside of the session when they are created. Display all the saved cars instead of creating them yourself beforehand by writing $porsche = new Car("2014 Porsche 911", 114991, 7864, "images/porsche.jpg");.

CD Organizer

Remember CDs? Make a program for users to catalog and organize their CDs. They should be able to create a new CD, enter the CD title, and list out all of their CDs.

After your program can create and list CDs, add a feature that allows a user add an artist to the application and its database. Then, each time a new CD is created, the user should be able to choose an existing artist to associate the CD with. Keep it simple, and assume each CD is just by a single artist.

After that, let users list out all the artists, and choose an artist to see which CDs are by that artist.

Don't forget to make regular Git commits and include a README in your project.

Further Exploration

After that, create another link on the home page to take the user to a "/search_by_artist" page. Here, users should be able to fill out a form with an artist name to search for their collection. After submitting the form the user should be taken to a page listing out all the CDs they own by that artist.

Improve your search - if the user has created a CD object by "JS Bach" they should be able to search for it by typing in "bach", "Bach", and "Johann Sebastian Bach".

Say the user has a CD by "Bachman–Turner Overdrive" as well as one by "JS Bach". If the user searches by the name "bach", or "Bach", both the CDs by "JS Bach" and "Bachman–Turner Overdrive" should be displayed.

Hangman

Make a program to play the Hangman game.

If you're not familiar with Hangman, it works something like this:

    ________________
   /\               |
   \/               |
    |               |
 -------         |
    |               |
    |               |
    /\              |
   /  \             |
              ___|_____


__ __ __ __ __ __

The spaces at the bottom represent letters of a word - in this case, the word is six letters long. On each turn, the player must guess a letter. If the letter is in the word, it's added to the bottom, like this:

    ________________
    |               |
                    |
                    |
                    |
                    |
                    |
                    |
                    |
              ______|_____


b __ b b __ __

If the letter isn't in the word, a body part is added to the hangman and the incorrect letter is displayed below the word:

    ________________
   /\               |
   \/               |
                    |
                    |
                    |
                    |
                    |
                    |
              ______|_____


b __ b b __ __

a

If the player guesses all the letters in the word, they win. If the player has had 6 incorrect guesses then they lose. The 6 incorrect guesses stand for the stick figure hangman's head, 2 arms, torso and 2 legs.

Build an app for playing Hangman. Think carefully about the object(s) you'll use before starting. There are multiple ways to solve this problem.

  • The computer can generate the words from a pre-set list you provide.
  • The user can make a Guess by entering a letter into a form, and the app should tell them if it's right or wrong, and keep track of how many guesses they have left.
  • Don't be to worried about graphics, you can tighten that up at the end. You can use a collection of 6 images. After the user has made a guess, take them to the "/hangman" page. If the user has one wrong guess, show the first image. If they have 2 wrong guesses, show the second image etc.
  • On the "/hangman" page, display the letters they have right so far, just like above: b _ b b _ _
  • Also on the "/hangman" page, display the letters they have wrong so far, and how many guesses they have left.
  • Again, on the "/hangman" page, you should also include a link back to the "/new_guess" page.
  • One more thing on the "/hangman" page - display a message saying "Yay! You guessed right!" or "Oh no! You guessed wrong!" at the top of the page. Display a different message saying "Game over!" in the same place on the page if they are out of guesses.
  • Don't allow duplicate guesses. If the user tries to guess the same letter twice, they should be told to try again.
  • Try to change the color of an element on your "/hangman" page based on whether the guess was right or wrong. Play around with changing the layout of your template file based on whether a guess is right or wrong, and whether or not the game is over.
  • For a bonus: Make it 2 player! Create a new form page where one user can choose a word for the other user to guess.

Go Fish

Make a game where two people can play Go Fish against each other. You will need to create a Game class and a Player class, which should at least hold the player's hand of cards.

If you are feeling ambitious: create a single-player mode where one user can play against the computer.

Peer Code Review


  • Are there two classes in the CD app, both CD and Artist?
  • Can a user input a new CD and see it in the list?
  • Can a user select an artist and see the CDs by that artist?
  • How might you DRY up the code?