This lab builds on the previous week so make sure you keep your site to extend via this lab.
- We’re going to build on the work from Lab 8
- Taking that site as a basis, we’re going to add in multiple types of Views so users can sort, filter and find data in our Pion Lath site
- We also might want to use this as a data driven backend
- There’s an option for either path
- In class demo should have given you ideas for refinement of your site
- If there’s anything you’d like to change to improve the data model then I’d recommend it so that it makes the Views easier to produce
- Set up your Drupal site to act as a headless backend
- Get the JSON Formatter chrome plugin
- Enabling Web Services modules expose the following path:
- jsonapi (which will then give you other routes)
- jsonapi/node/{type-name-here}
- Install https://ftp.drupal.org/files/projects/cors_ui-8.x-1.0.tar.gz
- Link provided because you can copy and paste it into the install module page
- This is the CORS UI module
- Fork and wire up this code pen to your headless Drupal site https://codepen.io/btopro/pen/wvoKVOx?editors=1000
- This is in Vue and while slapped together, is illustrating a few things working together:
- Data from a data modeling system (Drupal / backend)
- VueJS front end framework
- Web components as platform agnostic library
- Make this display courses from your setup. It is setup by default to show page data
- In your video I want to see you explaining how this works and the link to your Drupal site include a link to your codepen where it’s wired up headlessly
- This emulates a lot of how things are put together in the real world with Drupal, at high performance and scale
- fetch()
changes lives; if you need help understanding how this works in detail or syntax, ask during lab day
- Create three views to list each content types’ data
- Show a listing of courses in one view at /courses
- Show a listing of faculty at /faculty
- Show a listing of rooms /rooms
- As part of your video I want to see you adding fields and modifying a View in your video to demonstrate you know how to do it
- Make sure you are actually making Views with real data.
- I don’t want to see a hand made table on a page that has the correct looking URL
- Yes, this happens and is incredibly obvious and does not receive credit.
- I dress weird, I’m not stupid.
- Create entity references between your three content types
- Use 1 view of /course-data
to show data from all three content types on the same display
- This is a bit more confusing to setup but probably the least work. A lot more comprehension of what’s going on though.
- This happens in A LOT of industry builds
- Complete multiple options
- +50% (3.5pts) for each additional option
- Run through each option in your video
- Video’s obviously would be longer in this case
- No writing this week, just create the site with requirements
- Embed video on a page in your Drupal site (same as the 1st preferably)
- Submit link to post in #lab-9-drupal-views
channel on Slack
- This is due by Sunday at 11:59pm
- Did you create / configure the site to accomplish the option (3pts)
- Demonstration of technique / explanation in video form based on option selected (4pts)
- Evaluation is contextual based on which option you pick.
- If you need help, just ask; this is not a gimme lab