9 |
10 |
11 |
--------------------------------------------------------------------------------
/docker/apache/vhost.conf:
--------------------------------------------------------------------------------
1 |
2 | # ServerName www.example.com 3
3 | ServerAdmin webmaster@localhost
4 | DocumentRoot /srv/app/public
5 |
6 |
7 | AllowOverride all
8 | Require all granted
9 | Options +Indexes +MultiViews
10 |
11 |
12 | ErrorLog ${APACHE_LOG_DIR}/error.log
13 | CustomLog ${APACHE_LOG_DIR}/access.log combined
14 |
15 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | # Overview
3 | Using the same content you submitted for Individual HW#1 (not necessarily the same repository), update your pages to (1) run as a Docker container and (2) include sortable tables.
4 |
5 | _**Link directly to the table page.**_ Your submission URL should look something like: `https://github.com/iu-msis/2-simple-docker-js-[username]/public/[table_file.html]`
6 |
7 | ### Which repository?
8 | You can copy the Docker config files from this repo to your old repository, or copy your `app` folder from your previous repo into this one, making any improvements you need. _(Yes, I know this isn't the best way to do version control.)_
9 |
10 | Make sure that you don't accidentally copy the `.git` folder over when moving files.
11 |
12 | Choose either, but submit the link to the repo you use.
13 |
14 | ### Folder structure
15 |
16 | Use an `app` folder; put your `public` folder inside the app folder.
17 |
18 | # Make a Docker container, use it
19 | Using the Docker config files in this repo, launch Docker and view your new web site. Practice this, as we'll be doing it often.
20 |
21 | ## Using the command line
22 | As a reminder, use `cd` (**c**hange **d**irectory) to navigate, and `dir` (Windows) / `ls` (everything else) to view directory listings.
23 |
24 | ## Using Docker
25 | When in your project directory on the command line, you can use `docker-compose build` to build this docker image.
26 |
27 | After building, use `docker-compose up` from the project directory to run the container. (`ctrl-C` is one way to quit a running container.)
28 |
29 | After running this image container, the web page should be visible at http://localhost:8080/
30 |
31 | The provided file `docker-compose.yml` maps the container's port 80 (default web port) to the host machine's (your machine's) port 8080 with the `ports` command.
32 |
33 | The `volumes` command in `docker-compose.yml` maps your repository folder `app` to the container's `\srv\app\` folder. Changes made in one place will be made in the other. This means when you make changes to your HTML, CSS, or Javascript files that you won't have to rebuild your container.
34 |
35 | ## Add a `.dockerignore` File
36 | Read the following [explanation of the `.dockerignore` file](https://blog.codeship.com/leveraging-the-dockerignore-file-to-create-smaller-images/)
37 | Create a `.dockerignore` file with at least the following. Be able to explain what each line does.
38 |
39 | ```
40 | .*
41 | docker-compose.yml
42 | *.md
43 | ```
44 |
45 | ## Enter your container
46 |
47 | If you wish, you may enter your running container via the command line. First, you'll need to discover the hash of your container. `docker ps` lists all active containers. Copy the hash from your container, and replace it in the following command:
48 |
49 | ```bash
50 | docker exec -it c0ee14f0c047 bash
51 | ```
52 |
53 | The `-it` flag allows you to run an interactive `bash` session. `bash` is the name of the command line shell available in Docker images.
54 |
55 | Once inside, you can `ls` and `cd` to poke around. Try to find your document root! (Hint: it's where we copied files to.) When finished, exit `bash` with the `exit` command.
56 |
57 |
58 | # Make the table sortable.
59 |
60 | There are many public "sort table" scripts. For simplicity, I recommend using [this one](http://tristen.ca/tablesort/demo/). I've uploaded a short video showing how to do this. ("[03 Adding a sort table script.mp4](https://iu.mediaspace.kaltura.com/media/03+Adding+a+sort+table+script/1_9cd5rcdg)") If you use this script, you'll need to give your table a unique ID.
61 |
62 | ## A simple Javascript
63 |
64 | Adding this script should be simple. Read the documentation of your chosen script for help.
65 |
66 | You may use any table sort script on the web. Here are two to get your search started:
67 |
68 | * http://tristen.ca/tablesort/demo/ (This one is used in the video linked above)
69 | * https://github.hubspot.com/sortable/docs/welcome/ (I think I like this one better.)
70 |
71 | The ideal script "just works", perhaps with simply adding only a class to your table. The less we have to configure in our code to connect to the library, the better off we are.
72 |
73 | ## No errors
74 | Check the browser console before submitting to make sure you don't have any Javascript errors.
75 |
76 | ## Sort with style
77 | Add any necessary CSS to make the sorting look good. (e.g., up/down arrows on the column headers). How you do this will depend on which table sort script you use. Whatever solution you pick, there should be some changes to your CSS file.
78 |
79 | # Correct any errors
80 | If you missed parts of HW#1, or receiving feedback telling you to change something, fix it now. Mention your change(s) in the submission comments on Canvas.
81 |
82 | # Submit
83 | Submit to Canvas the GitHub URL that points directly to the table page in your repository. _**Link directly to the table page.**_ It will help if you name that file `table.html`. (Remember you may need to fix your navbar links too.)
84 |
--------------------------------------------------------------------------------