#itp-pd

[meghanhoke]

ITP-PD: How to pull data from the projects database using the serving pages

All of the scripts we used to create our automatic portfolio generator and our projects gallery are available for you to use, too!

When you load one of the serving scripts in a browser, it will display information from the database in JSON format. You can read in and parse this information for use in your own projects. 

All the serving scripts are currently located here:

http://itp.nyu.edu/~mah593/projects_db_work/serving_scripts/

Some pages do not require any arguments in order to serve you data from the projects database. These "standalone" serving scripts are as follows:

get_all_keywords.php This script returns all the keywords in the database, and the number of times each keyword appears in the database. The list is ordered alphabetically.

get_projects.php This script returns every project in the entire database. It provides all the basic information: project id, title, description, main image. This script can be given arguments to customize your search and limit the results (see below).

get_recent_class_titles.php returns the 100 most recent titles of classes entered into the database. Repeats account for multiple sections of a given class.

get_venues_list.php returns all the venues that projects may have been associated, in order from most recent to oldest venue.

The rest of the serving scripts require arguments to execute.

get_basic_portfolio.php?netid=abc123 will return basic project information for all projects by the specified user (specify a user by entering their netid).

get_name.php?projectid=1111 will return all student's names associated with a given a project id.

get_project_classes.php?projectid=1111 will return all the classes a project is associated with when given a project id.

get_project_detail.php?projectid=1111 will return details of a project when given a project id.

get_project_media.php?projectid=1111 will return all the media files associated with a project when given a project id. Note that the media files live in https://itp.nyu.edu/projects_documents/ and this url will need to be tacked on to the media name in order for you to link to it or display it in a web browser.

get_project_venues.php?projectid=1111 returns all venues associated with a project when given a project id.

get_projects.php?numdisplay=5&pagenumber=1 returns a subset of projects where numdisplay is the number of projects you want the script to return and pagenumber is how many pages into the results you want to go (1 if you want the first n number of pages, 2 if you want the second group, etc.).

get_projects.php?numdisplay=5&pagenumber=1&keyword=soul returns a subset of projects where numdisplay is the number of projects you want the script to return, pagenumber is how many pages into the results you want to go and keyword is the word you want the projects to be tagged with.

get_projects.php?numdisplay=5&pagenumber=1&title=loop returns a subset of projects where numdisplay is the number of projects you want the script to return, pagenumber is how many pages into the results you want to go and title is the word you want the project's title to contain.

get_projects.php?numdisplay=5&pagenumber=1&name=greg returns a subset of projects where numdisplay is the number of projects you want the script to return, pagenumber is how many pages into the results you want to go and name is the name of the person who is associated with the project.

get_projects.php?keyword=soul returns all the projects that have been tagged with the given keyword.

get_projects.php?title=loop returns all the projects that have the given word in their title.

get_projects.php?name=greg returns all the projects that are associated with a person with the given name.

[meghanhoke]

ITP-PD: How to customize your automatic portfolio

It is very easy to customize your portfolio using HTML, CSS and scripting languages of your choice. 

The portfolio project uses php to read in template pages and display them according to your styles. Using other server-side programming languages will not work without fancy trickery in the index.php and detail.php files. 

The Template Pages and the Structure of the Portfolio

Your portfolio consists of two incredibly important pages: portfolio.html and project_detail.html.

The portfolio.html page is the template page that index.php pulls from, and it controls the look and layout of your main portfolio site. 

The project_detail.html is the template page that detail.php pulls from, and it controls the look and layout of pages that will showcase the details of each individual project.

In addition to these two main pages, you are also provided with a basic about.html page. This page does not currently support the markers, and so anything you want in the about page will need to be hard-coded and maintained by you. You can also add any additional pages to your portfolio structure as you see fit and link to them as you would if you were building any other web site.

Markers

Markers are keywords surrounded by brackets and colons that hold the place of content that can be pulled from the database. For example, a marker that is the placeholder for your name looks like this:

{:name:}

Space and case don't matter. This means that for our intents and purposes, the following are all equivalent and will act as a placeholder for your name:

{:  Name:}  {:nAmE:}  {:NAME       :}

However, don't get too crazy; Not only are extra spaces within the name of the marker a pain in the butt to type, they also won't work. The following will not be recognized as markers:

{:n a m e:}  {:   na  me:}

Using the Markers

You can insert the markers into your template wherever you like. When our php script reads in your template, it will look for the markers and replace them with information coming from the database. 

A very simple template for the project detail page might look like this:

<html> <head> <title>{:name:}'s Portfolio</title> </head> <body> <h1>{:Name:}</h1> <div> <h2>{:Title:}</h2> <img src="{:visual:}" width="300" alt="main image" /> <p>{:Description:}</p> <p><a href="{:url:}">Click here for more information.</a></p> </div> </body> </html> 

In the above example, you can see the markers throughout the HTML. 

A Note About Markers

Currently, markers are used in one way on the main portfolio page and another way on the detail page. For clarity on how to use markers currently, markers for the templates will be split into two sections according to template.

Markers for the Main Portfolio Page

These markers can currently be used only outside of the {:startproject:} and {:endproject:} markers (see below for more information on these markers).

{:name:} will be replaced with your name as you specified it in your preferences.txt file.

{:facebook:} will be replaced with the URL to your facebook profile as specified in your preferences.txt file.

{:blog:} will be replaced with the URL to your blog as specified in your preferences.txt file.

{:twitter:} will be replaced with the URL to your twitter page as specified in your preferences.txt file.

{:googleplus:} will be replaced with the URL to your google+ profile page as specified in your preferences.txt file.

{:flickr:} will be replaced with the URL to your flickr profile as specified in your preferences.txt file.

{:soundcloud:} will be replaced with the URL to your soundcloud profile as specified in your preferences.txt file.

{:vimeo:} will be replaced with the URL to your vimeo profile as specified in your preferences.txt file.

{:youtube:} will be replaced with the URL to your youtube profile as specified in your preferences.txt file.

{:linkedin:} will be replaced with the URL to your linkedin profile as specified in your preferences.txt file.

{:gdgt:} will be replaced with the URL to your gdgt profile as specified in your preferences.txt file.

{:github:} will be replaced with the URL to your github profile as specified in your preferences.txt file.

{:startproject:} and {:endproject:} work together on your main portfolio page to denote what one preview of a project should look like on your portfolio. You should only have one set of these markers on your portfolio page. The following markers can currently be used only within the {:startproject:} and {:endproject:} markers.

{:title:} will be replaced with the title of your project.

{:name:} will be replaced with your name as specified in your preferences.txt file.

{:visual:} will be replaced with the main image that you specified for your project in the projects database.

{:abstract:} will be replaced with the "elevator pitch" from the projects database.

{:description:} will be replaced with your description of the project.

{:url:} will be replaced with the link to your documentation or your project link.

{:linktodetail:} will be replaced with the URL for the detail page for the current project.

{:media:} will be replaced with a block of all the media associated with your project.

{:venue:} will be replaced with the venues associated with your project.

{:course:} will be replaced with the courses associated with your project.

Markers for the Project Detail Page

{:facebook:} will be replaced with the URL to your facebook profile as specified in yourpreferences.txt file.

{:blog:} will be replaced with the URL to your blog as specified in your preferences.txt file.

{:twitter:} will be replaced with the URL to your twitter page as specified in your preferences.txt file.

{:googleplus:} will be replaced with the URL to your google+ profile page as specified in your preferences.txt file.

{:flickr:} will be replaced with the URL to your flickr profile as specified in your preferences.txt file.

{:soundcloud:} will be replaced with the URL to your soundcloud profile as specified in your preferences.txt file.

{:vimeo:} will be replaced with the URL to your vimeo profile as specified in your preferences.txt file.

{:youtube:} will be replaced with the URL to your youtube profile as specified in your preferences.txt file.

{:linkedin:} will be replaced with the URL to your linkedin profile as specified in your preferences.txt file.

{:gdgt:} will be replaced with the URL to your gdgt profile as specified in your preferences.txt file.

{:github:} will be replaced with the URL to your github profile as specified in your preferences.txt file.

{:title:} will be replaced with the title of your project.

{:name:} will be replaced with your name as specified in your preferences.txt file.

{:visual:} will be replaced with the main image that you specified for your project in the projects database.

{:abstract:} will be replaced with the "elevator pitch" from the projects database.

{:description:} will be replaced with your description of the project.

{:url:} will be replaced with the link to your documentation or your project link.

{:media:} will be replaced with a block of all the media associated with your project.

{:venue:} will be replaced with the venues associated with your project.

{:course:} will be replaced with the courses associated with your project.

For a fleshed out example of how to use these markers, please take a closer look at the provided portfolio templates.

[meghanhoke]

ITP-PD: How to setup your automatic portfolio

Setting up your automatic portfolio is quick and easy!

1. Start by downloading this zip file from github. 

2. Unzip the file and rename the unzipped folder portfolio. Do not remove the files from the portfolio folder, or change the file structure within the portfolio folder.

3. Edit the preferences.txt file. This file is in the JSON format. Enter your netid (for example: abc123) and your name as you want it to appear on your portfolio (for example: Meghan Hoke).

4. Add additional links to your social networking information in the preferences.txt file. The links programmed into your portfolio by default are Blog, Facebook, Twitter and LinkedIn, so you should consider entering those links at a minimum.

5. Save the preferences.txt file.

6. Take the entire portfolio folder and upload it to the itp student server, or any personal web hosting service that has php installed.

To maximize your personal visibility as well as the functionality of the project database pages, please consider installing this portfolio folder directly inside your htdocs folder on the ITP server in addition to your preferred location.

... and it's as easy as that!