diff --git a/apex-231/movies-lab/1-create-app/create-app.md b/apex-231/movies-lab/1-create-app/create-app.md new file mode 100644 index 00000000..68537c23 --- /dev/null +++ b/apex-231/movies-lab/1-create-app/create-app.md @@ -0,0 +1,153 @@ +# Create the Application + +## Introduction + +You will get started by creating a skeleton application and you will add to it in each lab until you have built a full application that allows you to create and manage a personal list of movies you have watched or want to watch. + +You will also need to sign up for an account on The Movie Database and obtain an API Key. A TMDB API Key is required for this tutorial, as authentication is needed to get data from The Movie Database API. + +Estimated Lab Time: 10 minutes + +Watch the video below for a quick walk-through of the lab. +[Create the Application](videohub:1_w4o026xl) + +### Objectives +In this lab, you will: +- Create a new application. +- Edit the appearance and theme of your application. +- Run your application. +- Sign up for a TMDB API key. + +### Prerequisites +- An Oracle APEX workspace + +## Task 1: Create the App + +1. If you have not already logged into your Oracle APEX workspace, sign in using the workspace name, email, and password you signed up with. + + ![Oracle APEX workspace login page](images/apex-sign-in.png " ") + +2. At the top left of your workspace, click **App Builder**. + + ![APEX workspace home page with highlighted App Builder button](images/workspace-home-edit.png " ") + +3. On the App Builder page, click the **Create** button. + + ![App Builder page with highlighted Create button](images/app-builder-create.png " ") + +4. Click **New Application**. + + ![Create an Application page with highlighted New Application button](images/new-application-edit.png " ") + +5. In the Create an Application wizard, set Name to **Movies Watchlist**. + +6. Open the Choose Application Icon dialog by clicking on the icon to the left of the Name field. + + * Select the red color swatch (fifth from the left) and the smiley face icon. + + * Click **Save Icon**. + + ![Choose Application Icon dialog with the fifth color swatch and Smiley icon selected](images/choose-icon.png " ") + +7. In the Pages section of the Create Application wizard, click the **Edit** button next to Home. + + ![Close-up of the Pages section of the Create an Application wizard](images/edit-home-page.png " ") + + * In the dialog, set Page Name: **My Watchlist** + + * Click the **Set Icon** button. + + - In the Select Icon dialog, search for **film**. + + - Click the film icon that has the play button in the middle. + + * Click **Save Changes**. + + ![Select icon dialog over top Add Blank Page dialog, with film icon selected](images/home-page-changes.png " ") + +8. Click **Create Application** to create your app and go to the application home page. + + ![Highlighted Create Application button on Create an Application page](images/create-app.png " ") + +## Task 2: Run the App + +1. On your application home page, click **Run Application**. + + ![Movies Watchlist app home with Run Application button highlighted](images/run-app.png " ") + +2. On the sign in page that opens in a new tab in your browser, enter your username and password that you used to sign in to your workspace. + +3. Click **Sign In**. + + ![Movies Watchlist runtime application sign-in page](images/app-sign-in.png " ") + +## Task 3: Update the Theme of the App + +1. In the tab that your app is running in, there will be a grey toolbar at the bottom of the page. This is your development toolbar that allows you to edit regions in your application user interface (UI) directly in the tab it's running in. +*Note: If you do not see the grey developer toolbar, mouse over the bottom of your browser window to make it display. End users who log directly into the app will not see this toolbar.* + +2. In the dev toolbar, click on **Customize** and then click **Theme Roller**. + + ![Close-up of developer toolbar in runtime application with the Customize menu open](images/dev-toolbar.png " ") + +3. Within the Theme Roller, you can modify many different aspects of the application UI. You will use it right now to update the color scheme. + +4. Under the **Theme** section, click on the Select Theme select box and choose **Vita - Dark**. + +4. Click on **Global Colors** to expand the section. + + * Copy the HEX color code: **C74634** + + * Click on the color swatch next to **Primary Accent** and paste the HEX code in the Hex text box. + + ![Theme Roller dialog open with the Theme and Global Colors sections expanded and the color picker open](images/theme-roller.png " ") + + * Click on the color swatch next to **Body Accent** and paste the HEX code **312D2A** in the Hex text box. + + * The other color swatches automatically updated to variations of the Header Accent color. + + * Click **Save As**. + + * Style Name: **Movies - Dark** + + * Click **Save**. + + * Close the Theme Roller window. + + ![Theme Roller Save As popup](images/save-theme.png " ") + +5. You have now updated the color scheme of your app. + +## Task 4: Sign up for a TMDB API Key + +1. Go to [The Movie Database (TMDB)](https://www.themoviedb.org/signup) to sign up for a free account. + +2. Once registered, follow the [Getting Started](https://developers.themoviedb.org/3/getting-started/introduction) instructions on TMDB Developer site. You will need to enter some of your app and contact information: + + ![The Movie Database API key sign-up page](images/api-key-signup-edit.png " ") + +3. After you have received your API Key, copy it and store it somewhere where you will be able to easily access it. + +You now know how to create, run, and update the theme of an application. You may now **proceed to the next lab**. + +## Resources + +- [App Builder Concepts](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/application-builder-concepts.html) + +- [Universal Theme](https://apex.oracle.com/pls/apex/apex_pm/r/ut/getting-started) + +- [The Movie Database](https://www.themoviedb.org/) + +- [The Movie Database API](https://developers.themoviedb.org/3/getting-started/introduction) + +## Stuck? Download the Application Here +Stuck on a step or struggling with the lab? You can download a copy of the Movies Watchlist application through Lab 1 and follow the instructions below to import it into your Oracle APEX workspace. + +- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-1-231.sql) to download a copy of the app at the end of Lab 1. + +- You can import the app to your APEX workspace by clicking **Import** in the App Builder home page and following the wizard steps. + +## Acknowledgements + +- **Author** - Paige Hanssen +- **Last Updated By/Date** - Paige Hanssen, May 2023 diff --git a/apex-231/movies-lab/1-create-app/images/apex-sign-in.png b/apex-231/movies-lab/1-create-app/images/apex-sign-in.png new file mode 100644 index 00000000..6c4f0b01 Binary files /dev/null and b/apex-231/movies-lab/1-create-app/images/apex-sign-in.png differ diff --git a/apex-231/movies-lab/1-create-app/images/api-key-signup-edit.png b/apex-231/movies-lab/1-create-app/images/api-key-signup-edit.png new file mode 100644 index 00000000..ad2175b4 Binary files /dev/null and b/apex-231/movies-lab/1-create-app/images/api-key-signup-edit.png differ diff --git a/apex-231/movies-lab/1-create-app/images/app-builder-create.png b/apex-231/movies-lab/1-create-app/images/app-builder-create.png new file mode 100644 index 00000000..3d043a3c Binary files /dev/null and b/apex-231/movies-lab/1-create-app/images/app-builder-create.png differ diff --git a/apex-231/movies-lab/1-create-app/images/app-sign-in.png b/apex-231/movies-lab/1-create-app/images/app-sign-in.png new file mode 100644 index 00000000..5f960329 Binary files /dev/null and b/apex-231/movies-lab/1-create-app/images/app-sign-in.png differ diff --git a/apex-231/movies-lab/1-create-app/images/choose-icon.png b/apex-231/movies-lab/1-create-app/images/choose-icon.png new file mode 100644 index 00000000..8c2105de Binary files /dev/null and b/apex-231/movies-lab/1-create-app/images/choose-icon.png differ diff --git a/apex-231/movies-lab/1-create-app/images/create-app.png b/apex-231/movies-lab/1-create-app/images/create-app.png new file mode 100644 index 00000000..cdafc964 Binary files /dev/null and b/apex-231/movies-lab/1-create-app/images/create-app.png differ diff --git a/apex-231/movies-lab/1-create-app/images/dev-toolbar.png b/apex-231/movies-lab/1-create-app/images/dev-toolbar.png new file mode 100644 index 00000000..8befd326 Binary files /dev/null and b/apex-231/movies-lab/1-create-app/images/dev-toolbar.png differ diff --git a/apex-231/movies-lab/1-create-app/images/edit-home-page.png b/apex-231/movies-lab/1-create-app/images/edit-home-page.png new file mode 100644 index 00000000..732d597a Binary files /dev/null and b/apex-231/movies-lab/1-create-app/images/edit-home-page.png differ diff --git a/apex-231/movies-lab/1-create-app/images/home-page-changes.png b/apex-231/movies-lab/1-create-app/images/home-page-changes.png new file mode 100644 index 00000000..13506428 Binary files /dev/null and b/apex-231/movies-lab/1-create-app/images/home-page-changes.png differ diff --git a/apex-231/movies-lab/1-create-app/images/new-application-edit.png b/apex-231/movies-lab/1-create-app/images/new-application-edit.png new file mode 100644 index 00000000..e892983d Binary files /dev/null and b/apex-231/movies-lab/1-create-app/images/new-application-edit.png differ diff --git a/apex-231/movies-lab/1-create-app/images/run-app.png b/apex-231/movies-lab/1-create-app/images/run-app.png new file mode 100644 index 00000000..49121e98 Binary files /dev/null and b/apex-231/movies-lab/1-create-app/images/run-app.png differ diff --git a/apex-231/movies-lab/1-create-app/images/save-theme.png b/apex-231/movies-lab/1-create-app/images/save-theme.png new file mode 100644 index 00000000..15251c96 Binary files /dev/null and b/apex-231/movies-lab/1-create-app/images/save-theme.png differ diff --git a/apex-231/movies-lab/1-create-app/images/theme-roller.png b/apex-231/movies-lab/1-create-app/images/theme-roller.png new file mode 100644 index 00000000..b80d3288 Binary files /dev/null and b/apex-231/movies-lab/1-create-app/images/theme-roller.png differ diff --git a/apex-231/movies-lab/1-create-app/images/workspace-home-edit.png b/apex-231/movies-lab/1-create-app/images/workspace-home-edit.png new file mode 100644 index 00000000..0a962394 Binary files /dev/null and b/apex-231/movies-lab/1-create-app/images/workspace-home-edit.png differ diff --git a/apex-231/movies-lab/2-creating-rest-sources/creating-rest-sources.md b/apex-231/movies-lab/2-creating-rest-sources/creating-rest-sources.md new file mode 100644 index 00000000..79cc3763 --- /dev/null +++ b/apex-231/movies-lab/2-creating-rest-sources/creating-rest-sources.md @@ -0,0 +1,166 @@ +# Create REST Data Sources + +## Introduction +This lab will walk you through how to create REST Data Sources that you will use to get movie data from The Movie Database API. You will use these REST sources in later labs to build out the movie search functionality. Make sure you have access to your API key that you signed up for at the end of the previous lab. + +Estimated Lab Time: 10 minutes + +Watch the video below for a quick walk-through of the lab. +[Create REST Data Sources](videohub:1_czyj8k85) + +### Objectives +In this lab, you will: +- Create REST data sources using a REST Catalog. +- Update the Web Credential needed for the REST sources. + +### Prerequisites +- Completion of workshop through Lab 1 +- A TMDB API key +- The TMDB REST Source Catalog + + +## Task 1: Import the REST Catalog +You will use a REST Source Catalog that contains predefined services to create REST data sources. Using a REST Catalog will greatly simplify the process of creating REST sources to get data from TMDB API because all you will need to do is import the catalog, select the sources you want to use, and update the web credential associated with the sources. + +1. Download the TMDB REST Source Catalog by clicking here. + +2. In the App Builder tab in your browser, click **Export/Import** on the Movies Watchlist application home page. + + ![Movies Watchlist application home with the Export/Import button highlighted](images/export-import.png " ") + +3. Click **Import**. + + ![Export/Import page with the Import button highlighted](images/import.png " ") + +4. On the Import page: + + * Drag and drop the **tmdb_catalog.sql** file you downloaded or click on the Drag and Drop region to open the file finder and select the catalog. + + * Set File Type to **REST Source Catalog**. + + * Click **Next**. + + ![Import page showing step 4](images/import-file.png " ") + +5. When the file has been imported successfully, click **Next**. + +6. Enter **Movies** for the Catalog Group the catalog will be in. + +7. Click **Import REST Catalog**. + + ![Import REST Catalog page showing steps 6 and 7](images/import-catalog.png " ") + +8. On the REST Source Catalogs page, you can see your new TMDB catalog that contains 4 Services in the Movies group. + + ![REST Source Catalogs page showing one Catalog that contains four Services](images/rest-catalog-page.png " ") + +## Task 2: Create REST Data Sources +Now that you have imported your REST Source Catalog, it will be very simple to create REST Data Sources using the services within the catalog. + +1. Return to the App Builder home by clicking **App Builder** in the APEX navigation bar. + + ![REST Source Catalogs page header with the App Builder button highlighted](images/app-builder-button.png " ") + +2. Click on the **Movies Watchlist** application. + +3. Click **Shared Components** in the middle of your Movies Watchlist application home. + + ![Movies Watchlist application home with the Shared Components button highlighted](images/shared-components.png " ") + +4. In the Data Sources section at the bottom of the page, click on **REST Data Sources**. + + ![Shared Components page with the REST Data Sources item highlighted](images/sc-rest-sources.png " ") + +5. On the REST Data Sources page, click the **Create** button. + + ![REST Data Sources page with Create button outlined](images/create-rds.png " ") + + * Select **From a REST Source Catalog**. + + * Click **Next**. + + ![Create REST Data Source wizard Method step with From a REST Source Catalog selected](images/rds-method.png " ") + +6. On the Create REST Data Source - Catalog Services page, you can view the different services in the TMDB REST Catalog and choose which ones you want to create REST data sources from. + + * From the list of services, click on **Popular Movies** to add it to the list of Selected Catalog Services. + + * Select **Search Movies**, **Movie Details**, and **Movie Cast** to add each to the selected catalog services as well. + + * Click **Next**. + + ![Create REST Data Source wizard Catalog Services step with all services selected](images/rds-catalog-services.png " ") + +7. On the Create REST Data Source - Catalog Details page, click **Create REST Data Sources** to create your four sources and return to the REST Data Sources page. + +## Task 3: Update the Web Credential +When you created the REST data sources from the REST Catalog, a new Web Credential was created in your workspace. This credential will allow you to make requests to the TMDB API. The final task to get your REST Data Sources to work will be updating your Web Credential to use your TMDB API key. + +1. In the APEX navigation bar, click the down arrow next to App Builder, select **Workspace Utilities** from the menu, and then choose **All Workspace Utilities** from the sub-menu. + + ![REST Data Sources page with the App Builder APEX navigation item menu and Workspace Utilities submenu expanded](images/app-builder-menu.png " ") + +2. From the list of Workspace Utilities, select **Web Credentials**. + + ![Workspace Utilities page with Web Credentials item highlighted](images/workspace-utilities.png " ") + +3. Click on **Credentials for Movie Cast**. +*Note: The Web Credentials name may instead match one of the other REST Data Sources you set up in Task 2.* + +4. On the Web Credentials edit page, set the following: + + * Name: **Credentials for Movies** + + * Static Identifier: **Credentials\_for\_Movies** + + * Credential Name: **api\_key** + + * Credential Secret: *Insert your unique API key here.* + + * Valid for URLs: **https://api.themoviedb.org/3/** + +5. Click **Apply Changes** to save your Web Credential. + + ![Edit Web Credentials page with attributes filled out with step 4 details](images/movies-credentials.png " ") + +6. Return to your Application home by clicking **App Builder** in the APEX navigation bar and selecting the **Movies Watchlist** application. + +You now know how to create REST data sources from a REST Catalog in Oracle APEX and will be able to get data from The Movie Database to use for your application. You may now **proceed to the next lab**. + +## Resources + +- [REST Data Sources Documentation](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/managing-REST-data-sources.html) + +- [REST Data Sources Video](https://www.youtube.com/watch?v=ctCwvD1qavs) + +## Stuck? Download the Application Here +Stuck on a step or struggling with the lab? You can download a copy of the Movies Watchlist application through Lab 2 and follow the instructions below to import it into your Oracle APEX workspace. + +- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-2-231.sql) to download a copy of the app at the end of Lab 2. + +- You can import the app to your APEX workspace by clicking **Import** in the App Builder home page and following the wizard steps. + +- You will be prompted for the Credentials for Movies web credential that was set up in this lab. You can see in the screenshot below that Credentials for Movies does not already exist in your workspace. + + ![APEX Install Application page with Web Credentials table without any Client ID or Client Secret values for Credentials for Movies](images/blank-credentials.png " ") + +- Within the Credentials for Movies row: + + - In the Client ID or Username column, enter **api\_key**. + + - In the Client Secret or Password column, paste your unique API key that you got from The Movie Database. + + - In the Verify Client Secret/Password column, past your API key again. + + ![APEX Install Application page with Web Credentials table containing Client ID and Client Secret for Credentials for Movies](images/complete-credentials.png " ") + +- Click **Next**. + +- Make sure Install Supporting Objects is **on** and click **Next** again. + +- Click **Install** to install the supporting objects and finish importing the application. + +## Acknowledgements + +- **Author** - Paige Hanssen +- **Last Updated By/Date** - Paige Hanssen, May 2023 \ No newline at end of file diff --git a/apex-231/movies-lab/2-creating-rest-sources/images/app-builder-button.png b/apex-231/movies-lab/2-creating-rest-sources/images/app-builder-button.png new file mode 100644 index 00000000..9b977bef Binary files /dev/null and b/apex-231/movies-lab/2-creating-rest-sources/images/app-builder-button.png differ diff --git a/apex-231/movies-lab/2-creating-rest-sources/images/app-builder-menu.png b/apex-231/movies-lab/2-creating-rest-sources/images/app-builder-menu.png new file mode 100644 index 00000000..74a18f54 Binary files /dev/null and b/apex-231/movies-lab/2-creating-rest-sources/images/app-builder-menu.png differ diff --git a/apex-231/movies-lab/2-creating-rest-sources/images/blank-credentials.png b/apex-231/movies-lab/2-creating-rest-sources/images/blank-credentials.png new file mode 100644 index 00000000..03bd59b8 Binary files /dev/null and b/apex-231/movies-lab/2-creating-rest-sources/images/blank-credentials.png differ diff --git a/apex-231/movies-lab/2-creating-rest-sources/images/complete-credentials.png b/apex-231/movies-lab/2-creating-rest-sources/images/complete-credentials.png new file mode 100644 index 00000000..7a8806f0 Binary files /dev/null and b/apex-231/movies-lab/2-creating-rest-sources/images/complete-credentials.png differ diff --git a/apex-231/movies-lab/2-creating-rest-sources/images/create-rds.png b/apex-231/movies-lab/2-creating-rest-sources/images/create-rds.png new file mode 100644 index 00000000..6685c839 Binary files /dev/null and b/apex-231/movies-lab/2-creating-rest-sources/images/create-rds.png differ diff --git a/apex-231/movies-lab/2-creating-rest-sources/images/export-import.png b/apex-231/movies-lab/2-creating-rest-sources/images/export-import.png new file mode 100644 index 00000000..3724f820 Binary files /dev/null and b/apex-231/movies-lab/2-creating-rest-sources/images/export-import.png differ diff --git a/apex-231/movies-lab/2-creating-rest-sources/images/import-catalog.png b/apex-231/movies-lab/2-creating-rest-sources/images/import-catalog.png new file mode 100644 index 00000000..5207a482 Binary files /dev/null and b/apex-231/movies-lab/2-creating-rest-sources/images/import-catalog.png differ diff --git a/apex-231/movies-lab/2-creating-rest-sources/images/import-file.png b/apex-231/movies-lab/2-creating-rest-sources/images/import-file.png new file mode 100644 index 00000000..14103396 Binary files /dev/null and b/apex-231/movies-lab/2-creating-rest-sources/images/import-file.png differ diff --git a/apex-231/movies-lab/2-creating-rest-sources/images/import.png b/apex-231/movies-lab/2-creating-rest-sources/images/import.png new file mode 100644 index 00000000..bbe096e4 Binary files /dev/null and b/apex-231/movies-lab/2-creating-rest-sources/images/import.png differ diff --git a/apex-231/movies-lab/2-creating-rest-sources/images/movies-credentials.png b/apex-231/movies-lab/2-creating-rest-sources/images/movies-credentials.png new file mode 100644 index 00000000..189de27b Binary files /dev/null and b/apex-231/movies-lab/2-creating-rest-sources/images/movies-credentials.png differ diff --git a/apex-231/movies-lab/2-creating-rest-sources/images/rds-catalog-services.png b/apex-231/movies-lab/2-creating-rest-sources/images/rds-catalog-services.png new file mode 100644 index 00000000..840a3dae Binary files /dev/null and b/apex-231/movies-lab/2-creating-rest-sources/images/rds-catalog-services.png differ diff --git a/apex-231/movies-lab/2-creating-rest-sources/images/rds-method.png b/apex-231/movies-lab/2-creating-rest-sources/images/rds-method.png new file mode 100644 index 00000000..39a85210 Binary files /dev/null and b/apex-231/movies-lab/2-creating-rest-sources/images/rds-method.png differ diff --git a/apex-231/movies-lab/2-creating-rest-sources/images/rest-catalog-page.png b/apex-231/movies-lab/2-creating-rest-sources/images/rest-catalog-page.png new file mode 100644 index 00000000..c9fcf080 Binary files /dev/null and b/apex-231/movies-lab/2-creating-rest-sources/images/rest-catalog-page.png differ diff --git a/apex-231/movies-lab/2-creating-rest-sources/images/sc-rest-sources.png b/apex-231/movies-lab/2-creating-rest-sources/images/sc-rest-sources.png new file mode 100644 index 00000000..c900dbb7 Binary files /dev/null and b/apex-231/movies-lab/2-creating-rest-sources/images/sc-rest-sources.png differ diff --git a/apex-231/movies-lab/2-creating-rest-sources/images/shared-components.png b/apex-231/movies-lab/2-creating-rest-sources/images/shared-components.png new file mode 100644 index 00000000..7a805d6e Binary files /dev/null and b/apex-231/movies-lab/2-creating-rest-sources/images/shared-components.png differ diff --git a/apex-231/movies-lab/2-creating-rest-sources/images/utilities-page.png b/apex-231/movies-lab/2-creating-rest-sources/images/utilities-page.png new file mode 100644 index 00000000..93f95a20 Binary files /dev/null and b/apex-231/movies-lab/2-creating-rest-sources/images/utilities-page.png differ diff --git a/apex-231/movies-lab/2-creating-rest-sources/images/workspace-utilities.png b/apex-231/movies-lab/2-creating-rest-sources/images/workspace-utilities.png new file mode 100644 index 00000000..d906171e Binary files /dev/null and b/apex-231/movies-lab/2-creating-rest-sources/images/workspace-utilities.png differ diff --git a/apex-231/movies-lab/3-creating-search-page/creating-movie-search-page.md b/apex-231/movies-lab/3-creating-search-page/creating-movie-search-page.md new file mode 100644 index 00000000..1b0e5af6 --- /dev/null +++ b/apex-231/movies-lab/3-creating-search-page/creating-movie-search-page.md @@ -0,0 +1,372 @@ +# Create the Movie Search Page + +## Introduction +You will create and set up the Movie Search page so that you can view popular movies and search for a movie of your choice. The search functionality must be built out before the watchlist even though the My Watchlist page is the home page of the application. You will create not only the Movie Search page, but also a button on the home page that links to the Search page. On the Movie Search page you will create regions that display the data from the REST sources you created in the previous lab, and you will implement a search bar that lets you search for movies. + +Estimated Lab Time: 20 minutes + +Watch the video below for a quick walk-through of the lab. +[Create the Movie Search Page](videohub:1_stfhi958) + +### Objectives +In this lab, you will: +- Create a new page. +- Link the Popular Movies REST data source to the new page. +- Link the Search Movies REST data source to the new page. +- Set up search functionality to allow a user to search for a movie. +- Add a button to link the Movie Search page to the Movie Watchlist page. + +### Prerequisites +- Completion of workshop through Lab 2 + +## Task 1: Create the Movie Search Page +To start, you will create the Movie Search page and do a little page setup before adding content to display movie data. + +1. In the Movies Watchlist application home, click the **Create Page** button just underneath Export/Import. + +2. In the Create a Page wizard, click **Blank Page**. + + ![Create a Page wizard dialog overlaying the Movies Watchlist application home](images/create-search-page.png " ") + +3. Set the following page attributes: + + * Page Number: **2** + + * Name: **Movie Search** + + * Page Mode: **Modal Dialog** + + * Click **Create Page** to create and go to the new page. + + ![Create Blank Page dialog with page attributes set to values in step 3](images/create-blank-page.png " ") + +4. The Page Designer in APEX is broken up into a few different panes: the rendering pane on the left, the layout pane in the middle, and the properties pane on the right. On your new page, make sure that **Page 2: Movie Search** is selected in the rendering pane. + +5. In the Page properties pane on the right, scroll down to **Appearance** and click on the **Use Template Defaults** button next to Template Options. + + * In the Template Options popup dialog, check the **Stretch to Fit Window** box under Common. + + * Click **Ok**. + + ![Page 2 open in Page Designer with Template Options dialog open](images/page-template-options.png " ") + +6. Within Navigation: + + * Cursor Focus: **First item on page** + + * Warn on Unsaved Changes: **off** + +7. In the CSS property group, you will also add some custom CSS to style some of the items on the page. + + * Copy the code below and paste it in the **Inline** property code box: + + ``` + + /* Set posters to be the same size/ratio */ + .a-CardView-media--square:before { + padding-top: 150%; /* 2:3 ratio */ + } + + /* set position of the Card badge */ + .a-CardView-badge { + position: absolute; + top: 12px; + right: 12px; + margin: 0; + } + + /* style the movie rating under the movie title */ + .movie-rating { + margin-top: 4px; + } + + /* style both the movie rating and the star icon under the movie title */ + .movie-rating, + .movie-rating .fa { + font-size: 12px; + line-height: inherit; + vertical-align: bottom; + opacity: 0.75; + } + ``` + + * The above code styles the movie poster images to all be the same size. It also adds some styling for the Cards region badge attribute that will be used in a later lab, to place it in the top right of a card. Finally, it adds some styling for the movie rating that you will display on the Card along with the movie title and poster. + + ![Page 2 open in Page Designer with the properties in the property editor updated to reflect the values from steps 6 and 7](images/page-properties.png " ") + +## Task 2: Set up Popular and Searched Movies +In this step, you will start to add content to your app using the REST data sources you set up in Lab 2. First, you will be using the Popular Movies source to get the list of current popular movies and display them when a user has not searched for any movies. Then you will create a similar region for the Search Movies source that displays a list of movies based on a search query. + +1. In the rendering pane of Page Designer, right click on Content Body and select **Create Region**. + + ![Page 2 open in Page Designer with Context Menu open over the rendering pane](images/create-region.png " ") + +2. Set the following properties: + + * Identification → Title: **Popular Movies** + + * Identification → Type: **Cards** + + * Source → Location: **REST Source** + + * Source → REST Source: **Popular Movies** + + - When you click the dropdown for REST Source, you should see all the REST data sources you set up earlier - Popular Movies, Search Movies, Movie Details, and Movie Cast. This will allow the Cards region to use the columns and data associated with the Popular Movies REST data source and populate the region. + + ![Page 2 open in Page Designer editing the Popular Movies region properties](images/popular-region-properties.png " ") + +3. Click the **Attributes** tab at the top of the properties pane on the right of Page Designer. This is where you can select what data will display on each movie card. + + * Appearance → Grid Columns: **5 Columns** + + * Card → Primary Key Column 1: **ID** + + * Title → Column: **TITLE** + + * Subtitle → Advanced Formatting: **on** + + - In your Cards region, you will show a star icon with the average rating of the movie next to it. Including multiple columns or custom text is not built-in to an attribute, but you can use Advanced Formatting to replace it with an HTML expression. + + * Subtitle → HTML Expression: + + ``` + + <div class="movie-rating"> + <span aria-hidden="true" class="fa fa-star"></span> &VOTE_AVERAGE.</div> + ``` + *Note: In the HTML Expression, the &NAME. syntax is used to create a substitution string for the value of the VOTE_AVERAGE column for each movie. To learn more, check out the Resources section at the end of this lab.* + + ![Page 2 open in Page Designer editing the first half of the Popular Movies region attributes](images/pop-region-attributes-1.png " ") + + * Media → Source: **Image URL** + + * Media → URL: **https://image.tmdb.org/t/p/w500&POSTER\_PATH.** + + * Media → Position: **First** + + * Media → Appearance: **Square** + + * Media → Sizing: **Cover** + + ![Page 2 open in Page Designer editing the second half of the Popular Movies region attributes](images/pop-region-attributes-2.png " ") + +4. You also need to create a Cards region to display the data from the Search Movies REST source. It will be almost exactly like the Popular Movies region, with a few minor changes. + +5. Right click on the Popular Movies region in the rendering pane and select **Duplicate** to create a copy of the region. + +6. Set the following properties: + + * Identification → Title: **Searched Movies** + + * Source → REST Source: **Search Movies** + +7. You also need to set the pagination attributes for the Searched Movies region, because you are getting all the search results at one time. Within Searched Movies, set the following Pagination properties in Searched Movies region Attributes tab: + + * Type: **Page** + + * Cards per page: **25** + + ![Close-up of the Pagination property group in the Searched Movies region attributes](images/searched-movies-pagination.png " ") + +8. Click the **Save** button to save your changes. + +## Task 3: Add the Search Bar +The final region that needs to be added to the Movie Search page is the search bar, which will allow a user to search for movies. Additionally, both the Popular and Searched movie regions are currently displaying at the same time on the Movie Search page. You want to only show one at a time based on the condition that the Searched Movies region displays only if the search bar page item has a value. If the search bar has no value, the page will only display the Popular Movies region. + +1. Right click on Dialog Header in the rendering pane and select **Create Region**. + + * Identification → Title: **Search Bar** + + * Appearance → Template: **Blank with Attributes** + + * Appearance → CSS Classes: **padding-sm** + *Note: If you open the options dialog next to the CSS Classes property, the only option available is margin-sm, so you need to manually enter padding-sm in the property text box.* + + ![Page 2 open in Page Designer editing the Search Bar region properties](images/search-bar.png " ") + +2. Right click on the new Search Bar region and select **Create Page Item**. + + ![Page 2 open in Page Designer with the Context Menu open over the rendering pane](images/create-page-item.png " ") + + * Identification → Name: **P2_SEARCH** + + * Appearance → Template: **Hidden** + + * Appearance → open the Template Options dialog: + + - Select **Stretch Form Item** + + - Size: **X Large** + + - Click **Ok**. + + * Appearance → Icon: **fa-search** + + * Appearance → Value Placeholder: **Search for a movie...** + + ![Page 2 open in Page Designer editing the P2_SEARCH item with the Template Options dialog open](images/search-item.png " ") + +3. Click on the **Popular Movies** region. + + * Scroll down to Server-Side Condition in the properties pane. + + - Type: **Item is NULL** + + - Item: **P2_SEARCH** + + * Now you are displaying the Popular Movies region based on a condition. If the P2_SEARCH item is NULL, then the region will display. You will create an opposite condition for the Searched Movies region. + + ![Close-up of the Server-side Condition property group for the Popular Movies region](images/popular-ssc.png " ") + +4. Click on **Searched Movies**. + + * Scroll down to Server-Side Condition. + + - Type: **Item is NOT NULL** + + - Item: **P2_SEARCH** + + * Now, you are only displaying Searched Movies if the P2_SEARCH item is NOT NULL (has a value). + +5. In order to actually search for a movie, you have to edit the query parameter that is submitted with a call to TMDB Search Movies API. A search query is required, otherwise you will not get any results back. When you look at the two Cards regions in the rendering pane, you can see that underneath Searched Movies there is a **Parameters** section. + +6. Expand the section and you will see **query** listed as a parameter. This is what you will link to the P2_SEARCH page item in order to control the search. + +7. Click on the **query** parameter. + + * You will see that its Type is REST Source Default, which is using the default value from the used in the URL to set up the REST source. + + * Change the Type from Static Value to **Item**. + + * In the Item field, enter **P2_SEARCH**. + +8. Save your changes by clicking the **Save** button in the top right of the Page Designer. + + ![Page 2 open in Page Designer editing the Searched Movies region query parameter](images/searched-query.png " ") + +## Task 4: Link Movie Search to Watchlist Page +The last task in this lab is linking the Movie Search page to the My Watchlist page. A modal dialog page like Movie Search can only be run on by launching it from another page, so you will create a button on the Watchlist page that will open the Search page. + +1. Go to page 1 by clicking the down arrow in the page navigation on the Page Designer toolbar. + + ![Close-up of the top toolbar of Page Designer with the page navigation highlighted](images/page-navigation.png " ") + +2. In the rendering pane on the left, click on the **Movies Watchlist** region in the Breadcrumb Bar position. + + * In the properties panel on the right, set the Title: **My Watchlist** + +3. Right click on the My Watchlist region in the rendering pane and select **Create Button**. + + ![Page 1 open in Page Designer editing the My Watchlist region with the context menu open over the rendering pane](images/create-button.png " ") + +4. Set the following button Identification properties in the properties panel on the right: + + * Identification → Button Name: **ADD_MOVIE** + + * Layout → Position: **Next** + + * Appearance → Hot: **on** + + * Behavior → Action: **Redirect to Page in this Application** + + * Click on **No Link Defined** next to Target to open the Link Builder dialog. + + * Page: **2** + + * Clear Cache: **2** + *Note: 2 is the ID of your Movie Search page. Clearing the Movie Search page cache will ensure the page items in are cleared each time the page is opened so users can perform new searches.* + + * Click **Ok** to close the dialog. + + ![Page 1 open in Page Designer editing the ADD_MOVIE button](images/button-properties.png " ") + +5. You also need to add a Dynamic Action to the button so that the My Watchlist page updates properly when the Movie Search page dialog closes. + +6. Right click on the **ADD_MOVIE** button in the rendering pane and select **Create Dynamic Action**. + + * Identification → Name: **Refresh on Dialog Closed** + + * When → Event: **Dialog Closed or Canceled** + + ![Page 1 open in Page Designer editing the Dynamic Action event associated with the ADD_MOVIE button](images/da-event.png " ") + +7. In the rendering pane, click the arrow next to Refresh on Dialog Closed to expand the event. + +8. Below the new Dynamic Action event, click on the **Refresh** action under True. + + * Identification → Action: **Submit Page** + +9. Click the green Save and Run button at the top right of the Page Designer. + + ![Page 1 open in Page Designer editing the Dynamic Action action associated with Refresh on Dialog Closed](images/da-action.png " ") + +10. Click the **Add Movie** button to open the Movie Search page. + + ![Page 1 of Movies Watchlist at runtime](images/add-movie.png " ") + +11. You should only see the search bar and the list of popular movies. + + ![Page 2 of Movies Watchlist at runtime open as a modal dialog over Page 1 displaying current popular movies](images/popular-movies.png " ") + +12. Type "harry potter" in the search bar and hit Enter (Return on Mac). + + * You should get results for movies with the search term "harry potter" in the title. + + ![Page 2 of Movies Watchlist at runtime open as a modal dialog over Page 1 displaying search results for Harry Potter movies](images/harry-potter.png " ") + +13. Delete "harry potter" from the search bar and press Enter (Return on Mac). The popular movies should reappear. + +14. In the Development Bar at the bottom of the page, click **Page 2** to return to editing Page 2 in Page Designer. + + ![Close-up of the developer toolbar at the bottom of the page at runtime of Movies Watchlist](images/dev-toolbar.png " ") + +You now know how to create a page in your APEX application and add components to define content in Page Designer. You may now **proceed to the next lab**. + +## Resources + +- [Page Designer Documentation](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/about-page-designer.html) + +- [Cards Documentation](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/managing-cards.html) + +- [Cards in Universal Theme](https://apex.oracle.com/pls/apex/r/apex_pm/ut/card-regions) + +- [Modal Dialog Pages](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/creating-dialog-pages.html) + +- [Variables in APEX](https://www.talkapex.com/2011/01/variables-in-apex/) + +- [Intro to Dynamic Actions Video](https://www.youtube.com/watch?v=hpcYevCC-Ow) + +- [Dynamic Actions Documentation](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/managing-dynamic-actions.html) + +## Stuck? Download the Application Here +Stuck on a step or struggling with the lab? You can download a copy of the Movies Watchlist application through Lab 3 and follow the instructions below to import it into your Oracle APEX workspace. + +- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-3-231.sql) to download a copy of the app at the end of Lab 3. + +- You can import the app to your APEX workspace by clicking **Import** in the App Builder home page and following the wizard steps. + +- You will be prompted for the Credentials for Movies web credential that was set up in lab 2. You can see in the screenshot below that Credentials for Movies does not already exist in the workspace. +*Note: If you completed Lab 2, Credentials for Movies will already exist in your workspace and this will be pre-filled* + + ![APEX Install Application page with Web Credentials table without any Client ID or Client Secret values for Credentials for Movies](images/blank-credentials.png " ") + +- If Credentials for Movies does not already within your workspace, set the following for the Credentials for Movies row: + + - In the Client ID or Username column, enter **api\_key**. + + - In the Client Secret or Password column, paste your unique API key that you got from The Movie Database. + + - In the Verify Client Secret/Password column, past your API key again. + + ![APEX Install Application page with Web Credentials table containing Client ID and Client Secret for Credentials for Movies](images/complete-credentials.png " ") + +- Click **Next**. + +- Make sure Install Supporting Objects is **on** and click **Next** again. + +- Click **Install** to install the supporting objects and finish importing the application. + +## Acknowledgements + +- **Author** - Paige Hanssen +- **Last Updated By/Date** - Paige Hanssen, May 2023 \ No newline at end of file diff --git a/apex-231/movies-lab/3-creating-search-page/images/add-movie.png b/apex-231/movies-lab/3-creating-search-page/images/add-movie.png new file mode 100644 index 00000000..f3a48172 Binary files /dev/null and b/apex-231/movies-lab/3-creating-search-page/images/add-movie.png differ diff --git a/apex-231/movies-lab/3-creating-search-page/images/blank-credentials.png b/apex-231/movies-lab/3-creating-search-page/images/blank-credentials.png new file mode 100644 index 00000000..03bd59b8 Binary files /dev/null and b/apex-231/movies-lab/3-creating-search-page/images/blank-credentials.png differ diff --git a/apex-231/movies-lab/3-creating-search-page/images/button-properties.png b/apex-231/movies-lab/3-creating-search-page/images/button-properties.png new file mode 100644 index 00000000..aa012145 Binary files /dev/null and b/apex-231/movies-lab/3-creating-search-page/images/button-properties.png differ diff --git a/apex-231/movies-lab/3-creating-search-page/images/complete-credentials.png b/apex-231/movies-lab/3-creating-search-page/images/complete-credentials.png new file mode 100644 index 00000000..7a8806f0 Binary files /dev/null and b/apex-231/movies-lab/3-creating-search-page/images/complete-credentials.png differ diff --git a/apex-231/movies-lab/3-creating-search-page/images/create-blank-page.png b/apex-231/movies-lab/3-creating-search-page/images/create-blank-page.png new file mode 100644 index 00000000..d5ac5915 Binary files /dev/null and b/apex-231/movies-lab/3-creating-search-page/images/create-blank-page.png differ diff --git a/apex-231/movies-lab/3-creating-search-page/images/create-button.png b/apex-231/movies-lab/3-creating-search-page/images/create-button.png new file mode 100644 index 00000000..4f5e831b Binary files /dev/null and b/apex-231/movies-lab/3-creating-search-page/images/create-button.png differ diff --git a/apex-231/movies-lab/3-creating-search-page/images/create-page-item.png b/apex-231/movies-lab/3-creating-search-page/images/create-page-item.png new file mode 100644 index 00000000..2ad48407 Binary files /dev/null and b/apex-231/movies-lab/3-creating-search-page/images/create-page-item.png differ diff --git a/apex-231/movies-lab/3-creating-search-page/images/create-region.png b/apex-231/movies-lab/3-creating-search-page/images/create-region.png new file mode 100644 index 00000000..67d96eb3 Binary files /dev/null and b/apex-231/movies-lab/3-creating-search-page/images/create-region.png differ diff --git a/apex-231/movies-lab/3-creating-search-page/images/create-search-page.png b/apex-231/movies-lab/3-creating-search-page/images/create-search-page.png new file mode 100644 index 00000000..33c5dfc3 Binary files /dev/null and b/apex-231/movies-lab/3-creating-search-page/images/create-search-page.png differ diff --git a/apex-231/movies-lab/3-creating-search-page/images/da-action.png b/apex-231/movies-lab/3-creating-search-page/images/da-action.png new file mode 100644 index 00000000..a580515b Binary files /dev/null and b/apex-231/movies-lab/3-creating-search-page/images/da-action.png differ diff --git a/apex-231/movies-lab/3-creating-search-page/images/da-event.png b/apex-231/movies-lab/3-creating-search-page/images/da-event.png new file mode 100644 index 00000000..307323a0 Binary files /dev/null and b/apex-231/movies-lab/3-creating-search-page/images/da-event.png differ diff --git a/apex-231/movies-lab/3-creating-search-page/images/dev-toolbar.png b/apex-231/movies-lab/3-creating-search-page/images/dev-toolbar.png new file mode 100644 index 00000000..1a06022c Binary files /dev/null and b/apex-231/movies-lab/3-creating-search-page/images/dev-toolbar.png differ diff --git a/apex-231/movies-lab/3-creating-search-page/images/harry-potter.png b/apex-231/movies-lab/3-creating-search-page/images/harry-potter.png new file mode 100644 index 00000000..8f1a01b0 Binary files /dev/null and b/apex-231/movies-lab/3-creating-search-page/images/harry-potter.png differ diff --git a/apex-231/movies-lab/3-creating-search-page/images/page-navigation.png b/apex-231/movies-lab/3-creating-search-page/images/page-navigation.png new file mode 100644 index 00000000..4869fb3d Binary files /dev/null and b/apex-231/movies-lab/3-creating-search-page/images/page-navigation.png differ diff --git a/apex-231/movies-lab/3-creating-search-page/images/page-properties.png b/apex-231/movies-lab/3-creating-search-page/images/page-properties.png new file mode 100644 index 00000000..2e410be5 Binary files /dev/null and b/apex-231/movies-lab/3-creating-search-page/images/page-properties.png differ diff --git a/apex-231/movies-lab/3-creating-search-page/images/page-template-options.png b/apex-231/movies-lab/3-creating-search-page/images/page-template-options.png new file mode 100644 index 00000000..b2a53c62 Binary files /dev/null and b/apex-231/movies-lab/3-creating-search-page/images/page-template-options.png differ diff --git a/apex-231/movies-lab/3-creating-search-page/images/pop-region-attributes-1.png b/apex-231/movies-lab/3-creating-search-page/images/pop-region-attributes-1.png new file mode 100644 index 00000000..b6aed054 Binary files /dev/null and b/apex-231/movies-lab/3-creating-search-page/images/pop-region-attributes-1.png differ diff --git a/apex-231/movies-lab/3-creating-search-page/images/pop-region-attributes-2.png b/apex-231/movies-lab/3-creating-search-page/images/pop-region-attributes-2.png new file mode 100644 index 00000000..52a00f9d Binary files /dev/null and b/apex-231/movies-lab/3-creating-search-page/images/pop-region-attributes-2.png differ diff --git a/apex-231/movies-lab/3-creating-search-page/images/popular-movies.png b/apex-231/movies-lab/3-creating-search-page/images/popular-movies.png new file mode 100644 index 00000000..46bf09af Binary files /dev/null and b/apex-231/movies-lab/3-creating-search-page/images/popular-movies.png differ diff --git a/apex-231/movies-lab/3-creating-search-page/images/popular-region-properties.png b/apex-231/movies-lab/3-creating-search-page/images/popular-region-properties.png new file mode 100644 index 00000000..dd770638 Binary files /dev/null and b/apex-231/movies-lab/3-creating-search-page/images/popular-region-properties.png differ diff --git a/apex-231/movies-lab/3-creating-search-page/images/popular-ssc.png b/apex-231/movies-lab/3-creating-search-page/images/popular-ssc.png new file mode 100644 index 00000000..83a59859 Binary files /dev/null and b/apex-231/movies-lab/3-creating-search-page/images/popular-ssc.png differ diff --git a/apex-231/movies-lab/3-creating-search-page/images/search-bar.png b/apex-231/movies-lab/3-creating-search-page/images/search-bar.png new file mode 100644 index 00000000..adfd88fc Binary files /dev/null and b/apex-231/movies-lab/3-creating-search-page/images/search-bar.png differ diff --git a/apex-231/movies-lab/3-creating-search-page/images/search-item.png b/apex-231/movies-lab/3-creating-search-page/images/search-item.png new file mode 100644 index 00000000..0f8ec33a Binary files /dev/null and b/apex-231/movies-lab/3-creating-search-page/images/search-item.png differ diff --git a/apex-231/movies-lab/3-creating-search-page/images/searched-movies-pagination.png b/apex-231/movies-lab/3-creating-search-page/images/searched-movies-pagination.png new file mode 100644 index 00000000..add57c12 Binary files /dev/null and b/apex-231/movies-lab/3-creating-search-page/images/searched-movies-pagination.png differ diff --git a/apex-231/movies-lab/3-creating-search-page/images/searched-query.png b/apex-231/movies-lab/3-creating-search-page/images/searched-query.png new file mode 100644 index 00000000..022703a2 Binary files /dev/null and b/apex-231/movies-lab/3-creating-search-page/images/searched-query.png differ diff --git a/apex-231/movies-lab/4-creating-details-page/creating-movie-details-page.md b/apex-231/movies-lab/4-creating-details-page/creating-movie-details-page.md new file mode 100644 index 00000000..a90ce849 --- /dev/null +++ b/apex-231/movies-lab/4-creating-details-page/creating-movie-details-page.md @@ -0,0 +1,303 @@ +# Create the Movie Details Page + +## Introduction +In this lab, you will set up a new page that displays the details of a single movie. When you click on a specific movie from the Movie Search page and, eventually, the My Watchlist page, the details for that movie will be retreived from the Movie Details TMDB API and shown in the Movie Details page. + +Estimated Lab Time: 20 minutes + +Watch the video below for a quick walk-through of the lab. +[Create the Movie Details Page](videohub:1_0ri1dc4r) + +### Objectives +In this lab, you will: +- Create a new page, Movie Details. +- Use the Movie Details REST source to display data on the Movie Details page. +- Connect the Movie Details page to the Movie Search page. + +### Prerequisites +- Completion of workshop through Lab 3 + +## Task 1: Create the Movie Details Page +You will start by creating a new page, Movie Details, which contains a Form. While this form will not display in the final Movie Details page, it will hold the Movie Details data needed to display content in other regions on the page. + +1. In the toolbar at the top of the Page Designer, click the **Create** button (3 buttons left of the Save button) and select **Page**. + + * Click **Form**. + + ![Create a Page wizard overlaying Page 2 in Page Designer](images/create-page.png " ") + + * Page Number: **3** + + * Name: **Movie Details** + + * Mode: **Modal Dialog** + + * Data Source: **REST Data Source** + + * REST Data Source: **Movie Details** + + * Click **Next**. + + ![Create Page wizard on the Create a Form step to set the page and data source attributes](images/create-form.png " ") + + * Select **ID (Number)** as the Primary Key Column 1 value. + + * Click **Create Page**. + + ![Create Page wizard on the Create a Form step to set the form primary key](images/create-form-pk.png " ") + + * You should now be on page 3, the **Movie Details** page. + +2. Make sure **Page 3: Movie Details** is selected in the rendering pane on the left. + +3. In the Page properties pane on the right, scroll down to **Appearance** and click on the **Use Template Defaults** button next to Template Options. + + * In the Template Options popup dialog, check the **Stretch to Fit Window** box under Common. + + * Click **Ok**. + +4. In the **CSS** property group, paste the code below and into the **Inline** CSS code editor: + + ``` + + /* Customize Movie Header Card */ + .movie-header-card.a-CardView { + /* Increase the font sizes for movie name and tag line */ + --a-cv-title-font-size: 24px; + --a-cv-subtitle-font-size: 16px; + + /* Add additional spacing around the header content */ + --ut-cv-subtitle-margin: 16px 0 0 0; + display: flex; + padding: 24px 0; + } + .movie-header-card .a-CardView-body { + /* Remove unnecessary padding */ + padding-top: 0; + } + .movie-details { + /* Center align Card Body text */ + text-align: center; + } + ``` + + * The CSS above will style the page header you are going to create. While the original layout and format of the Cards region type can get you pretty far, a little CSS goes a long way in rounding out the entire look of a component or page. + + ![Page 3 open in Page Designer with the CSS property group visible in the Page property editor](images/details-page-css.png " ") + +## Task 2: Create the Header and Overview +You can use the value stored in the P3\_ID page item in the Movie Details form to specify which movie to get the details for. Then you can utilize a few columns from the Movie Details REST source to create a nice header that includes the movie poster, the background image, and the movie title. In addition to the header, you will add a region to display the overview of the movie formatted in a way that is easy to read. + +1. You will first need to hide all the Movie page items so that you can still access the values stored in them but create your own content for the page. To do this, you can set the Type of a column to Hidden, which will not display an item on the frontend. + + * To select all items, click on the first item under the Movie region, P3\_ID, and then hold shift and click on the last item, P3\_BELONGS\_TO\_COLLECTION. + + * In the Page Items editing pane, set Type: **Hidden** + + ![Page 3 open in Page Designer with all Movie Details form items selected and their type set to Hidden in the Property Editor](images/hide-items.png " ") + +2. To start creating the header for the Movie Details page, right click on Content Body and select **Create Region**. + + * Set the following: + + - Title: **Header** + + - Type: **Cards** + + - Source → Location: **REST Source** + + - Source → REST Source: **Movie Details** + + - Local Post Processing → Type: **SQL Query** + + - Local Post Processing → replace the existing SQL query with the following: + + ``` + + select id, + title, + 'https://image.tmdb.org/t/p/w500'||poster_path as poster_url, + 'https://image.tmdb.org/t/p/w500'||backdrop_path as backdrop_url, + release_date, + runtime, + trunc(runtime/60) || 'hr ' || + extract (minute from numtodsinterval((runtime/60), 'HOUR' )) || 'min' + as runtime_friendly, + vote_average, + tagline + from #APEX$SOURCE_DATA# + ``` + + - The above query is a simplified version of the original query because you only need a few columns for the header. It also converts RUNTIME into the hours and minutes format and returns it as RUNTIME\_FRIENDLY. + + - Appearance → open Template Options: + + + Style: **Style B** + + + Click **Ok**. + + ![Page 3 open in Page Designer with Property Editor open on editing the Header region properties](images/header-region-attributes.png " ") + +3. Click on the **Attributes** tab at the top of the Header region Property Editor. + + * Set the following: + + - Appearance → Layout: **Horizontal (Row)** + + - Card → CSS Classes: **movie-header-card** + + - Card → Primary Key Column 1: **ID** + + - Title → Column: **TITLE** + + - Subtitle → Column: **TAGLINE** + + - Body → Advanced Formatting: **on** + + - Body → HTML Expression: + + ``` + + <div class="movie-details"> + <span title="Release Date">Released &RELEASE_DATE.</span> &middot; + <span title="Runtime">&RUNTIME_FRIENDLY.</span> &middot; + <span title="&VOTE_AVERAGE. out of 10"><span class="fa fa-star" aria-hidden="true"></span> &VOTE_AVERAGE.</span> + </div> + ``` + + - Icon and Badge → Icon Source: **Image URL** + + - Icon and Badge → Image URL: **&POSTER\_URL.** + + - Icon and Badge → Icon CSS Classes: **w100 h150** + + ![Page 3 open in Page Designer with Property Editor open on editing the Header region attributes](images/header-attributes.png " ") + + - Media → Source: **URL Column** + + - Media → URL Column: **BACKDROP\_URL** + + - Media → Position: **As Background Image** + + - Media → Sizing: **Cover** + + ![Page 3 open in Page Designer with Property Editor open on editing the Header region media attributes](images/header-media.png " ") + +4. In order to get the details for a specific movie selected from the Search page, you have to update the **movie\_id** parameter that is part of the call to TMDB Movie Details API. When you look at the Details and Header regions in the rendering pane, you can see that under each is a Parameters section, just like there was for Popular and Searched Movies on the Movie Search page. + +5. Expand the **Parameters** section under the **Movie Details** region. + +6. Click on the **movie\_id** parameter. + + * Change the Type from REST Source Default to **Item**. + + * In the Item field, enter **P3\_ID**. + + ![Page 3 open in Page Designer with Property Editor open on editing the movie id parameter](images/movie-id-parameter.png " ") + +7. Follow steps 6 and 7 to update the movie_id parameter for the **Header** region. + +8. Finally, you will add a region to display the movie Overview to go along with the nice header containing the movie details. + +9. In the rendering pane on the left, right click on Content Body and select **Create Region**. + +10. Set the following properties: + + * Identification → Title: **Overview** + + * Source → HTML Code: **&P3\_OVERVIEW.** + + * Appearance → Template: **Content Block** + + * Appearance → Template Options: + + - Region Title: **Small** + + - Click **Ok**. + + ![Page 3 open in Page Designer with Property Editor open on editing the Overview region](images/overview.png " ") + +11. Click **Save**. + +## Task 3: Connect the Details Page to the Search Page +To be able to view the details of any movie you click on on the Movie Search page, you can link the Details page to the Search page like you did when setting up the Movie Search page and Add Movie button. However, in order to get the details for the specific movie you clicked on, you have to pass some data from the Search page to the Details page. + +1. Navigate to page **2: Movie Search** by clicking the down arrow in the page navigation on the Page Designer toolbar. + +2. On the Movie Search page, you can see in the rendering pane that both Popular Movies and Searched Movies have an **Actions** section underneath them. + +3. Right click on **Actions** underneath Popular Movies and select **Create Action**. + + ![Close up of rendering pane with Cards Action context menu open on Page 2 in Page Designer ](images/create-action.png " ") + + * Identification → Type: **Full Card** + + * The Link section is where you can connect page 3 to page 2 by redirecting the user to a new page, similar to how a user gets to the Movie Search page from the Home page. + + * Click on **No Link Defined** next to Target to open the Link Builder dialog. + + - Page: **3** + + - You also need to set the value of the ID item on page 3 (P3\_ID) so that the Movie Details page has the ID of the movie that was clicked on. + + - Under Set Items, enter **P3\_ID** as the Name. + + - Value: **&ID.** + *Note: You can also use the buttons next to the name and value fields to browse items that you can pass values to. Notice that the options for Name all come from the Movie Details page (P3), because that is the item you want to set. The options for Value are the columns from the Movie Search data source because this is the what you are getting from page 2 and passing to page 3.* + + - Click **Ok**. + + ![Link Builder Target dialog for Popular Movies Full Card action open over Page 2 in Page Designer](images/card-action.png " ") + +4. Follow step 3 for the **Searched Movies** region to create a Full Card action that redirects to page 3. + +5. Click **Save**. + +6. Refresh the page where your application is running. + +7. Test the Movie Details page by clicking the **Add Movie** button to open the Movie Search page. + +8. Click on the movie of choice to see the details. + + ![Movie Details dialog page open in runtime application](images/details-page-live.png " ") + +You have now set up the Movie Details page and set it up to open for any card that is selected from the Movie Search page. You may now **proceed to the next lab**. + +## Resources + +- [Modal Dialog Pages](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/creating-dialog-pages.html) + +- [Variables in APEX](https://www.talkapex.com/2011/01/variables-in-apex/) + +## Stuck? Download the Application Here +Stuck on a step or struggling with the lab? You can download a copy of the Movies Watchlist application through Lab 4 and follow the instructions below to import it into your Oracle APEX workspace. + +- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-4-231.sql) to download a copy of the app at the end of Lab 4. + +- You can import the app to your APEX workspace by clicking **Import** in the App Builder home page and following the wizard steps. + +- You will be prompted for the Credentials for Movies web credential that was set up in lab 2. You can see in the screenshot below that Credentials for Movies does not already exist in the workspace. +*Note: If you completed Lab 2, Credentials for Movies will already exist in your workspace and this will be pre-filled* + + ![APEX Install Application page with Web Credentials table without any Client ID and Client Secret for Credentials for Movies](images/blank-credentials.png " ") + +- If Credentials for Movies does not already within your workspace, set the following for the Credentials for Movies row: + + - In the Client ID or Username column, enter **api\_key**. + + - In the Client Secret or Password column, paste your unique API key that you got from The Movie Database. + + - In the Verify Client Secret/Password column, past your API key again. + + ![APEX Install Application page with Web Credentials table containing Client ID and Client Secret for Credentials for Movies](images/complete-credentials.png " ") + +- Click **Next**. + +- Make sure Install Supporting Objects is **on** and click **Next** again. + +- Click **Install** to install the supporting objects and finish importing the application. + +## Acknowledgements + +- **Author** - Paige Hanssen +- **Last Updated By/Date** - Paige Hanssen, May 2023 \ No newline at end of file diff --git a/apex-231/movies-lab/4-creating-details-page/images/blank-credentials.png b/apex-231/movies-lab/4-creating-details-page/images/blank-credentials.png new file mode 100644 index 00000000..03bd59b8 Binary files /dev/null and b/apex-231/movies-lab/4-creating-details-page/images/blank-credentials.png differ diff --git a/apex-231/movies-lab/4-creating-details-page/images/card-action.png b/apex-231/movies-lab/4-creating-details-page/images/card-action.png new file mode 100644 index 00000000..7d074820 Binary files /dev/null and b/apex-231/movies-lab/4-creating-details-page/images/card-action.png differ diff --git a/apex-231/movies-lab/4-creating-details-page/images/complete-credentials.png b/apex-231/movies-lab/4-creating-details-page/images/complete-credentials.png new file mode 100644 index 00000000..7a8806f0 Binary files /dev/null and b/apex-231/movies-lab/4-creating-details-page/images/complete-credentials.png differ diff --git a/apex-231/movies-lab/4-creating-details-page/images/create-action.png b/apex-231/movies-lab/4-creating-details-page/images/create-action.png new file mode 100644 index 00000000..f0e9831c Binary files /dev/null and b/apex-231/movies-lab/4-creating-details-page/images/create-action.png differ diff --git a/apex-231/movies-lab/4-creating-details-page/images/create-form-attributes.png b/apex-231/movies-lab/4-creating-details-page/images/create-form-attributes.png new file mode 100644 index 00000000..fb52e246 Binary files /dev/null and b/apex-231/movies-lab/4-creating-details-page/images/create-form-attributes.png differ diff --git a/apex-231/movies-lab/4-creating-details-page/images/create-form-pk.png b/apex-231/movies-lab/4-creating-details-page/images/create-form-pk.png new file mode 100644 index 00000000..0d4a7091 Binary files /dev/null and b/apex-231/movies-lab/4-creating-details-page/images/create-form-pk.png differ diff --git a/apex-231/movies-lab/4-creating-details-page/images/create-form.png b/apex-231/movies-lab/4-creating-details-page/images/create-form.png new file mode 100644 index 00000000..95fff9a8 Binary files /dev/null and b/apex-231/movies-lab/4-creating-details-page/images/create-form.png differ diff --git a/apex-231/movies-lab/4-creating-details-page/images/create-page.png b/apex-231/movies-lab/4-creating-details-page/images/create-page.png new file mode 100644 index 00000000..bcdd3c06 Binary files /dev/null and b/apex-231/movies-lab/4-creating-details-page/images/create-page.png differ diff --git a/apex-231/movies-lab/4-creating-details-page/images/details-page-css.png b/apex-231/movies-lab/4-creating-details-page/images/details-page-css.png new file mode 100644 index 00000000..dcd0413c Binary files /dev/null and b/apex-231/movies-lab/4-creating-details-page/images/details-page-css.png differ diff --git a/apex-231/movies-lab/4-creating-details-page/images/details-page-live.png b/apex-231/movies-lab/4-creating-details-page/images/details-page-live.png new file mode 100644 index 00000000..fb849f68 Binary files /dev/null and b/apex-231/movies-lab/4-creating-details-page/images/details-page-live.png differ diff --git a/apex-231/movies-lab/4-creating-details-page/images/header-attributes.png b/apex-231/movies-lab/4-creating-details-page/images/header-attributes.png new file mode 100644 index 00000000..b67194f0 Binary files /dev/null and b/apex-231/movies-lab/4-creating-details-page/images/header-attributes.png differ diff --git a/apex-231/movies-lab/4-creating-details-page/images/header-media.png b/apex-231/movies-lab/4-creating-details-page/images/header-media.png new file mode 100644 index 00000000..792eedb2 Binary files /dev/null and b/apex-231/movies-lab/4-creating-details-page/images/header-media.png differ diff --git a/apex-231/movies-lab/4-creating-details-page/images/header-region-attributes.png b/apex-231/movies-lab/4-creating-details-page/images/header-region-attributes.png new file mode 100644 index 00000000..ce246ee0 Binary files /dev/null and b/apex-231/movies-lab/4-creating-details-page/images/header-region-attributes.png differ diff --git a/apex-231/movies-lab/4-creating-details-page/images/hide-items.png b/apex-231/movies-lab/4-creating-details-page/images/hide-items.png new file mode 100644 index 00000000..42c65734 Binary files /dev/null and b/apex-231/movies-lab/4-creating-details-page/images/hide-items.png differ diff --git a/apex-231/movies-lab/4-creating-details-page/images/movie-id-parameter.png b/apex-231/movies-lab/4-creating-details-page/images/movie-id-parameter.png new file mode 100644 index 00000000..0ea9b42b Binary files /dev/null and b/apex-231/movies-lab/4-creating-details-page/images/movie-id-parameter.png differ diff --git a/apex-231/movies-lab/4-creating-details-page/images/overview.png b/apex-231/movies-lab/4-creating-details-page/images/overview.png new file mode 100644 index 00000000..d02addea Binary files /dev/null and b/apex-231/movies-lab/4-creating-details-page/images/overview.png differ diff --git a/apex-231/movies-lab/5-creating-tables/creating-tables.md b/apex-231/movies-lab/5-creating-tables/creating-tables.md new file mode 100644 index 00000000..0b31fe64 --- /dev/null +++ b/apex-231/movies-lab/5-creating-tables/creating-tables.md @@ -0,0 +1,242 @@ +# Create Users and Watchlist Tables + +## Introduction +Up to this point, most of the work has revolved around implementing REST data sources and creating pages to use that data on. In this lab, you will create local tables to store user and movie data. You will also add an application item and process, which will capture and store a user email and ID when a user logs into the app. This is what allows multiple users to have their own watchlist. + +Estimated Lab Time: 10 minutes + +Watch the video below for a quick walk-through of the lab. +[Create Users and Watchlist Tables](videohub:1_u9hl1p4v) + +### Objectives +In this lab, you will: +- Set up the movie_users and watchlist tables using Quick SQL. +- Create an application process and item for storing user information. + +### Prerequisites +- Completion of workshop through Lab 4 + +## Task 1: Create the Movie Users Table +The first table you need to create is the movie\_users table. It is very simple, but it needs to be created before the watchlist table so that you can access the user ID. The watchlist table has a foreign key, user\_id, that will link it to the movie\_users table and allow different users to have their own unique lists. + +1. In the Page Designer tab in your browser, click the down arrow next to SQL Workshop in the APEX navigation bar, hover over Utilities, and select **Quick SQL**. + + ![SQL Workshop menu with the Utilities sub-menu open over Page 2 in Page Designer](images/quick-sql.png " ") + +2. Copy the code below and paste into the first line of the code editor: + + ``` + + movie_users + id /pk + username /unique + ``` + +3. Click the **Generate SQL** button at the top of the pane. + + ![Quick SQL page with copied movie_users code in the left pane and generated code in the right pane](images/generate-users-sql.png " ") + +4. Click **Settings** on the top right of the Quick SQL toolbar. + + * Scroll down to Additional Columns and check **Audit columns**. + + * This will automatically add the Created, Created\_By, Updated, and Updated\_By columns to the table. + + * Click **Save Changes**. + + ![Quick SQL Settings dialog open to the Audit Columns region overlaying the Quick SQL page](images/users-settings.png " ") + +5. Click **Save SQL Script**. + +6. Script Name: **Create movie users** + +7. Click **Save Script**. + + ![Save Script dialog open over the Quick SQL page](images/users-save-script.png " ") + +8. Click the **Review and Run** button. + +9. Click **Run**, then **Run Now**. + + * You should see a success page with 2 statements successfully processed. + + ![SQL Scripts Results page showing 2 statements processed, 2 successful, and 0 errors](images/users-success.png " ") + +10. Now you will add an Application Item and Application Process, which will capture a user's email when they log in and assign them an ID so that you can keep track of their unique watchlist. + +## Task 2: Create the Application Item and Process +To store data within the movie\_users database, you will use an application process. The process checks a user's email when they log in and if they are a new user, it adds them to a local table, assigning them an ID. The ID of the current user is also stored in an application item, which will be used when a user adds, removes, or updates movies in their watchlist. + +1. Click on **App Builder** in the top APEX toolbar. + +2. Click on your **Movies Watchlist** app. + +3. Click on **Shared Components**. + +4. In the Application Logic section of the page, click **Application Items**. + + ![Shared Components page with Application Items highlighted under the Application Logic region](images/app-items.png " ") + +5. Click **Create**. + + * Set Name: **USER_ID** + + * Click **Create Application Item**. + + ![Create Application Item page for new USER_ID item](images/create-item.png " ") + +6. Go back to Shared Components and click on **Application Processes**. + + ![Shared Components page with Application Processes highlighted under the Application Logic region](images/app-processes.png " ") + +7. Click **Create**. + + * Name: **Add User** + + * Point: **After Authentication** + + * Click **Next**. + + ![Create Application Process dialog over the Application Processes page](images/create-process.png " ") + + * Copy and paste the following code into the Code editor box in the Source section: + + ``` + + -- create movie user ID + -- query movie_users table to check for existing user + -- if yes, return PK as user_id + -- if no, add new user to movie_users + declare + l_user_id number; + begin + select id into l_user_id from movie_users where username = :APP_USER; + + :USER_ID := l_user_id; + + exception + when no_data_found then + insert into movie_users + (username) + values + (:APP_USER) + returning + id into :USER_ID; + end; + ``` + + * Click **Next**. + + ![Create Application Process dialog on the source code step over the Application Process page](images/create-process-code.png " ") + + * Click **Create Process**. + +8. You have now set up an application item that keeps track of the current user's ID and added a process to store a user in the movie\_users table. + +9. To initialize the user id for your movies app, you will need to sign out of your app in the tab in your browser where your app is running and sign back in. + +10. On the My Watchlist page of your app, click the button at the top right of the screen where your username is displayed and click Sign Out. + + ![Close-up of user menu in runtime application with Sign Out button highlighted](images/sign-out.png " ") + +11. Now, sign back in and your new application process will run and store your user ID in the movie\_users table and the USER\_ID application item. + + ![Movies Watchlist runtime app sign-in page](images/2-sign-in-edit.png " ") + +12. Next, you'll set up a new table using Quick SQL to store all of a user's movies that they add to their list. + +## Task 3: Create the Watchlist Table +You will need a table to store some basic movie information in addition to the user information. This data is what will be the source for the My Watchlist page. + +1. In the toolbar at the top of your APEX workspace, click the down arrow next to SQL Workshop, hover over Utilities, and select **Quick SQL**. + +2. Copy the code below and replace the existing code by pasting it into the Quick SQL pane: + + ``` + + watchlist + id /pk + movie_id + user_id /fk movie_users + watched_yn + watched date + title + poster_url + release_date + runtime num + vote_average num + /unique movie_id, user_id + ``` + + * Note the /unique directive in the last line of the Quick SQL code. In the movie\_users table, you created a unique key by using the /unique directive for the username column. This prevents the same user from getting put into the table more than once by making sure the username is always unique. In the watchlist table, the unique key actually comes from two different columns: movie\_id and user\_id. A single user cannot add the same movie to the watchlist table more than once. Unique keys are extremely helpful when it comes to maintaining the integrity of the data in your local tables. + +3. Click the **Generate SQL** button at the top of the pane. + + ![Quick SQL page with copied watchlist code in the left pane and generated code in the right pane](images/generate-watchlist.png " ") + +4. Just like you did for the movie\_users table, click Settings and select **Audit columns**. + +5. Click **Save Changes**. + + ![Quick SQL Settings dialog open to the Audit Columns region overlaying the Quick SQL page](images/watchlist-settings.png " ") + +6. Click **Save SQL Script**. + + * Set Name: **Create watchlist** + + * Click **Save Script**. + + ![Save Script dialog open over the Quick SQL page](images/watchlist-save-script.png " ") + +7. Click **Review and Run**. + +8. Click **Run**. + +9. Click **Run Now**. You should see 3 statements executed successfully. + + ![SQL Scripts Results page showing 4 statements processed, 4 successful, and 0 errors](images/watchlist-success.png " ") + +10. The watchlist table has now been created. When a user clicks the Add to Watchlist button in the Movie Details dialog, the SQL action will capture the movie and user data and store it in this table so that you can access it later to build out our Watchlist on the front end. + +11. Now you will set up your Back, Add, Remove, and Mark Watched buttons. + +You now know how to use Quick SQL to define new tables, and create application items and processes to store information and at specific points in your app. You may now **proceed to the next lab**. + +## Resources + +- [Tour of SQL Workshop](https://www.youtube.com/watch?v=bdglHoq-Hbs) + +- [Quick SQL Documentation](https://docs.oracle.com/en/database/oracle/apex/22.2/aeutl/using-quick-sql.html) + +## Stuck? Download the Application Here +Stuck on a step or struggling with the lab? You can download a copy of the Movies Watchlist application through Lab 5 and follow the instructions below to import it into your Oracle APEX workspace. + +- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-5-231.sql) to download a copy of the app at the end of Lab 5. + +- You can import the app to your APEX workspace by clicking **Import** in the App Builder home page and following the wizard steps. + +- You will be prompted for the Credentials for Movies web credential that was set up in lab 2. You can see in the screenshot below that Credentials for Movies does not already exist in the workspace. +*Note: If you completed Lab 2, Credentials for Movies will already exist in your workspace and this will be pre-filled* + + ![APEX Install Application page with Web Credentials table without any Client ID and Client Secret for Credentials for Movies](images/blank-credentials.png " ") + +- If Credentials for Movies does not already within your workspace, set the following for the Credentials for Movies row: + + - In the Client ID or Username column, enter **api\_key**. + + - In the Client Secret or Password column, paste your unique API key that you got from The Movie Database. + + - In the Verify Client Secret/Password column, past your API key again. + + ![APEX Install Application page with Web Credentials table containing Client ID and Client Secret for Credentials for Movies](images/complete-credentials.png " ") + +- Click **Next**. + +- Make sure Install Supporting Objects is **on** and click **Next** again. + +- Click **Install** to install the supporting objects and finish importing the application. + +## Acknowledgements + +- **Author** - Paige Hanssen +- **Last Updated By/Date** - Paige Hanssen, May 2023 \ No newline at end of file diff --git a/apex-231/movies-lab/5-creating-tables/images/2-sign-in-edit.png b/apex-231/movies-lab/5-creating-tables/images/2-sign-in-edit.png new file mode 100644 index 00000000..d8ace602 Binary files /dev/null and b/apex-231/movies-lab/5-creating-tables/images/2-sign-in-edit.png differ diff --git a/apex-231/movies-lab/5-creating-tables/images/app-items.png b/apex-231/movies-lab/5-creating-tables/images/app-items.png new file mode 100644 index 00000000..9a46a191 Binary files /dev/null and b/apex-231/movies-lab/5-creating-tables/images/app-items.png differ diff --git a/apex-231/movies-lab/5-creating-tables/images/app-processes.png b/apex-231/movies-lab/5-creating-tables/images/app-processes.png new file mode 100644 index 00000000..dea3165c Binary files /dev/null and b/apex-231/movies-lab/5-creating-tables/images/app-processes.png differ diff --git a/apex-231/movies-lab/5-creating-tables/images/blank-credentials.png b/apex-231/movies-lab/5-creating-tables/images/blank-credentials.png new file mode 100644 index 00000000..03bd59b8 Binary files /dev/null and b/apex-231/movies-lab/5-creating-tables/images/blank-credentials.png differ diff --git a/apex-231/movies-lab/5-creating-tables/images/complete-credentials.png b/apex-231/movies-lab/5-creating-tables/images/complete-credentials.png new file mode 100644 index 00000000..7a8806f0 Binary files /dev/null and b/apex-231/movies-lab/5-creating-tables/images/complete-credentials.png differ diff --git a/apex-231/movies-lab/5-creating-tables/images/create-item.png b/apex-231/movies-lab/5-creating-tables/images/create-item.png new file mode 100644 index 00000000..48626f83 Binary files /dev/null and b/apex-231/movies-lab/5-creating-tables/images/create-item.png differ diff --git a/apex-231/movies-lab/5-creating-tables/images/create-process-code.png b/apex-231/movies-lab/5-creating-tables/images/create-process-code.png new file mode 100644 index 00000000..291695f4 Binary files /dev/null and b/apex-231/movies-lab/5-creating-tables/images/create-process-code.png differ diff --git a/apex-231/movies-lab/5-creating-tables/images/create-process.png b/apex-231/movies-lab/5-creating-tables/images/create-process.png new file mode 100644 index 00000000..52de080b Binary files /dev/null and b/apex-231/movies-lab/5-creating-tables/images/create-process.png differ diff --git a/apex-231/movies-lab/5-creating-tables/images/generate-users-sql.png b/apex-231/movies-lab/5-creating-tables/images/generate-users-sql.png new file mode 100644 index 00000000..bb68b958 Binary files /dev/null and b/apex-231/movies-lab/5-creating-tables/images/generate-users-sql.png differ diff --git a/apex-231/movies-lab/5-creating-tables/images/generate-watchlist.png b/apex-231/movies-lab/5-creating-tables/images/generate-watchlist.png new file mode 100644 index 00000000..f491b338 Binary files /dev/null and b/apex-231/movies-lab/5-creating-tables/images/generate-watchlist.png differ diff --git a/apex-231/movies-lab/5-creating-tables/images/quick-sql.png b/apex-231/movies-lab/5-creating-tables/images/quick-sql.png new file mode 100644 index 00000000..359d066a Binary files /dev/null and b/apex-231/movies-lab/5-creating-tables/images/quick-sql.png differ diff --git a/apex-231/movies-lab/5-creating-tables/images/sign-out.png b/apex-231/movies-lab/5-creating-tables/images/sign-out.png new file mode 100644 index 00000000..b203d64c Binary files /dev/null and b/apex-231/movies-lab/5-creating-tables/images/sign-out.png differ diff --git a/apex-231/movies-lab/5-creating-tables/images/users-save-script.png b/apex-231/movies-lab/5-creating-tables/images/users-save-script.png new file mode 100644 index 00000000..7368ea30 Binary files /dev/null and b/apex-231/movies-lab/5-creating-tables/images/users-save-script.png differ diff --git a/apex-231/movies-lab/5-creating-tables/images/users-settings.png b/apex-231/movies-lab/5-creating-tables/images/users-settings.png new file mode 100644 index 00000000..ff2c5c74 Binary files /dev/null and b/apex-231/movies-lab/5-creating-tables/images/users-settings.png differ diff --git a/apex-231/movies-lab/5-creating-tables/images/users-success.png b/apex-231/movies-lab/5-creating-tables/images/users-success.png new file mode 100644 index 00000000..2ca0e139 Binary files /dev/null and b/apex-231/movies-lab/5-creating-tables/images/users-success.png differ diff --git a/apex-231/movies-lab/5-creating-tables/images/watchlist-save-script.png b/apex-231/movies-lab/5-creating-tables/images/watchlist-save-script.png new file mode 100644 index 00000000..2b229e1a Binary files /dev/null and b/apex-231/movies-lab/5-creating-tables/images/watchlist-save-script.png differ diff --git a/apex-231/movies-lab/5-creating-tables/images/watchlist-settings.png b/apex-231/movies-lab/5-creating-tables/images/watchlist-settings.png new file mode 100644 index 00000000..f24ee25f Binary files /dev/null and b/apex-231/movies-lab/5-creating-tables/images/watchlist-settings.png differ diff --git a/apex-231/movies-lab/5-creating-tables/images/watchlist-success.png b/apex-231/movies-lab/5-creating-tables/images/watchlist-success.png new file mode 100644 index 00000000..51832dad Binary files /dev/null and b/apex-231/movies-lab/5-creating-tables/images/watchlist-success.png differ diff --git a/apex-231/movies-lab/6-creating-details-buttons/creating-buttons-badges.md b/apex-231/movies-lab/6-creating-details-buttons/creating-buttons-badges.md new file mode 100644 index 00000000..bb414a5a --- /dev/null +++ b/apex-231/movies-lab/6-creating-details-buttons/creating-buttons-badges.md @@ -0,0 +1,430 @@ +# Implement Movie Details Buttons and Movie Search Badges + +## Introduction +In the previous lab, you did the backend work to set up tables and application items. In this lab, you will be creating Add, Remove, Watched, and Back buttons that will control the flow between the Movie Search and Movie Details page, as well as the data stored in the watchlist table. You will also add a badge to the Cards on the Movie Search page to have a visual cue for movies that a user has already marked as added or watched. + +Estimated Lab Time: 25 minutes + +Watch the video below for a quick walk-through of the lab. +[Implement Buttons and Badges](videohub:1_otl3rw96) + +### Objectives +In this lab, you will: +- Implement an Add button that inserts a movie into the watchlist table. +- Implement a Remove button that deletes a movie from the watchlist table. +- Implement a Watched button that marks a movie as watched in your watchlist table. +- Implement a Back button that takes you back to the Movie Search page. +- Use badges on the Movie Search page to display what movies have been marked as added or watched. + +### Prerequisites +- Completion of workshop through Lab 5 + +## Task 1: Create the Movie Details Buttons + +1. Click on **App Builder** in the APEX navigation bar. + +2. Click on your **Movies Watchlist** app. + +3. Click on the **Movie Details** page. + +4. When you set up the Movie Details page, a Buttons region was automatically created in the Dialog Footer position of the page with a Cancel button. You are going to move this region to the Dialog Header position and add some buttons that will allow you to add, remove, and update your watchlist. + +5. In the rendering pane, click on the **Buttons** region and set the following properties: + + * Layout → Position: **Dialog Header**. + + * Appearance → Template Options: + + - Style: **Remove UI Decoration** + + - Click **Ok**. + + ![Template Options Dialog open for the Buttons region on Page 3 in Page Designer](images/buttons-region.png " ") + +6. Click on the CANCEL button under the Buttons region. + + * Identification → Button Name: **BACK** + + * Layout → Position: **Previous** + + * Appearance → Button Template: **Text with Icon** + + * Appearance → Template Options: + + - Style: **Remove UI Decoration** + + - Click **Ok** to close the dialog. + + * Appearance → Icon: **fa-chevron-left** + + ![Page 3 open in Page Designer with the BACK button properties open in the Property Editor](images/back-properties.png " ") + +7. Click the right arrow next to the BACK button and then the right arrow next to Dynamic Actions to see the Dynamic Action events connected to the button. + +8. Delete the Dynamic Action by right clicking on the **Cancel Dialog** event under Dynamic Actions and selecting **Delete**. + + ![Page 3 open in Page Designer with the context menu open for the Cancel Dialog event](images/delete-cancel.png " ") + +7. Right click the Buttons region and select **Create Button**. + + * Identification → Button Name: **ADD\_TO\_WATCHLIST** + + * Layout → Position: **Next** + + * Appearance → Hot: **on** + + ![Page 3 open in Page Designer with the ADD_TO_WATCHLIST button properties open in the Property Editor](images/add-button.png " ") + +8. Right click the Buttons region and select **Create Button**. + + * Identification → Button Name: **REMOVE\_FROM\_WATCHLIST** + + * Layout → Position: **Next** + + ![Page 3 open in Page Designer with the REMOVE_FROM_WATCHLIST button properties open in the Property Editor](images/remove-button.png " ") + +9. Right click the Buttons region and select **Create Button**. + + * Identification → Button Name: **MARK\_WATCHED** + + * Identification → Label: **I've Watched This** + + * Layout → Position: **Next** + + * Appearance → Hot: **on** + + ![Page 3 open in Page Designer with the MARK_WATCHED button properties open in the Property Editor](images/watched-button.png " ") + +10. Click **Save**. + +## Task 2: Implement Button Actions +Now that you have the four buttons, it's time to connect actions to them. You first will connect each button to a database action. Then, you will implement those actions using a page process for each button. You will also use a branch to redirect the user back to the previous page once the process is complete. + +1. In the rendering pane, click on the **BACK** button and scroll down to the Behavior section. + + * Action: **Redirect to Page in this Application** + + * Click the button next to Target to open the Link Builder → Target dialog. + + - Page: **2** + + - Click **Ok**. + + ![BACK button Link Builder Target dialog open on Page 3 in Page Designer](images/back-behavior.png " ") + +2. Click on **ADD\_TO\_WATCHLIST**. + + * Scroll down to Behavior and set Database Action to **SQL INSERT action**. + + ![Page 3 open in Page Designer with the ADD_TO_WATCHLIST button Behavior properties open in the Property Editor](images/add-behavior.png " ") + +3. Click on **REMOVE\_FROM\_WATCHLIST**. + + * Set Database Action to **SQL DELETE action**. + +4. Click on **MARK\_WATCHED**. + + * Set Database Action to **SQL UPDATE action**. + +5. At the top of the rendering pane, click the **Processing** tab (the two looping arrows). + + ![Close-up of tabs at the top of the rendering pane in Page Designer with the third tab highlighted](images/processing-tab.png " ") + +6. Under the Processing section, click on the existing **Close Dialog** process and make the following changes: + + * Identification → Name: **Add movie** + + * Identification → Type: **Execute Code** + + * Copy the following code and paste it into the PL/SQL code box in the Source property group: + + ``` + + insert into watchlist + ( + movie_id, + user_id, + watched_yn, + title, + poster_url, + release_date, + runtime, + vote_average + ) + values + ( + :P3_ID, + :USER_ID, + 'N', + :P3_TITLE, + 'https://image.tmdb.org/t/p/w500'||:P3_POSTER_PATH, + :P3_RELEASE_DATE, + :P3_RUNTIME, + :P3_VOTE_AVERAGE + ); + ``` + + * Server-side Condition → When Button Pressed: **ADD\_TO\_WATCHLIST** + + * Server-side Condition → Type: **- Select -** + + ![Close-up of the Add movie process properties set in step 6](images/add-process.png " ") + +7. Right click on Processing and select **Create Process**. + + * Identification → Name: **Remove movie** + + * Copy the following code and paste it into the PL/SQL code box in the Source property group: + + ``` + + delete from watchlist + where movie_id = :P3_ID + and user_id = :USER_ID; + ``` + + * Server-side Condition → When Button Pressed: **REMOVE\_FROM\_WATCHLIST** + +8. Right click on Processing and select **Create Process**. + + * Identification → Name: **Update movie** + + * Copy the following code and paste it into the PL/SQL code box in the Source property group: + + ``` + + update watchlist + set watched_yn = 'Y', + watched = SYSDATE + where movie_id = :P3_ID + and user_id = :USER_ID; + ``` + + * Server-side Condition → When Button Pressed: **MARK\_WATCHED** + +9. Finally, you will add a branch that runs after the processing action to redirect the user to the previous page. + +10. In the processing pane on the left, right click on After Processing and select **Create Branch**. + + * Identification → Name: **Redirect to previous page** + + * Click on **Target** to open the Link Builder + + - Page: **&P3\_PREVIOUS\_PAGE\_ID.** + + - The item P3\_PREVIOUS\_PAGE\_ID contains the page number of the page you were on before the Movie Details page. This is to return to whichever page the user was previously on when any of the buttons on the Details page get clicked. However, you still need to set up the Previous Page ID item, so you will do that now. + + - Click **Ok**. + +11. Click the **Rendering** tab at the top of the left pane. + + ![Redirect to previous page branch Link Builder Target dialog open on Page 3 in Page Designer](images/redirect-branch.png " ") + +12. Right click on the **Movie Details** region and select **Create Page Item**. + + * Name: **P3\_PREVIOUS\_PAGE\_ID** + + * Type: **Hidden** + +13. Click **Save**. + +## Task 3: Add Server-Side Conditions to Buttons +At this point, all of the buttons on the Movie Details page display at all times, regardless of whether or not you've already added a movie to your list or marked something as watched. You should really only show the Remove or Watched buttons if a movie exists in the watchlist table, meaning the user has added it. Similarly, you should only display the Added button if a user has not yet added a movie to the the watchlist table. + +To accomplish this, you are going to use Server-Side Conditions, like you did for the Popular Movies and Searched Movies regions on page 2. You will also add a condition for the Back button, so that it only displays if the previous page is the Movie Search page. + +1. Click on the **ADD\_TO\_WATCHLIST** button. + +2. In the **Server-side Condition** property group, set the following properties: + + * Type: **No Rows returned** + + * SQL Query: + + ``` + + select null + from watchlist + where movie_id = :P3_ID + and user_id = :USER_ID + ``` + + ![Close-up of the ADD_TO_WATCHLIST button Server-side condition properties](images/add-ssc.png " ") + +3. Click on the **REMOVE\_FROM\_WATCHLIST** button. + +4. Set the following Server-side Condition properties: + + * Type: **Rows returned** + + * SQL Query: + + ``` + + select null + from watchlist + where movie_id = :P3_ID + and user_id = :USER_ID + ``` + + ![Close-up of the REMOVE_FROM_WATCHLIST button Server-side condition properties](images/remove-ssc.png " ") + +5. Click on the **MARK\_WATCHED** button. + +6. Set the following Server-side Condition properties: + + * Type: **Rows returned** + + * SQL Query: + + ``` + + select null + from watchlist + where movie_id =:P3_ID + and user_id = :USER_ID + and watched_yn = 'N' + ``` + + ![Close-up of the MARK_WATCHED button Server-side condition properties](images/watched-ssc.png " ") + +7. Click on the **BACK** button. + +8. Set the following Server-side Condition properties. + + * Type: **Item = Value** + + * Item: **P3\_PREVIOUS\_PAGE\_ID** + + * Value: **2** + + ![Close-up of the BACK button Server-side condition properties](images/back-ssc.png " ") + +9. Click **Save**. + +10. Before you test the buttons, you will add badges to the Movie Search page and update the Cards region actions to give P3\_PREVIOUS\_PAGE_ID a value. + +## Task 4: Add Badges to Movie Search Cards +Before you test the buttons you just implemented, you will add badges to the Movie Search page so that you have a visual cue of what has been added and marked as watched. You can extend the Popular and Search Movies data that gets returned from the REST data source by checking the watchlist table to find movies with a matching ID to the displayed movies on the search page. You also need to update the Full Card action for both the Popular Movies and Searched Movies regions to give the P3\_PREVIOUS\_PAGE\_ID page item a value so that the Movie Details redirect branch you created in Task 2 will go back to the correct page. + +1. Navigate to page 2 in your Movies Watchlist application and click on the **Popular Movies** region. + + * Scroll down to the **Local Post Processing** property group and set Type: **SQL Query** + + * Replace the existing SQL Query with the query below: + + ``` + + select ads.id, + ads.adult, + ads.title, + ads.video, + ads.overview, + ads.popularity, + ads.vote_count, + ads.poster_path, + ads.release_date, + ads.vote_average, + ads.backdrop_path, + ads.original_title, + ads.original_language, + case when w.watched_yn = 'Y' then 'Watched' + when w.watched_yn = 'N' then 'Added' + end as badge_label, + case when w.watched_yn = 'N' then 'u-success' + end as badge_color + from #APEX$SOURCE_DATA# ads + LEFT OUTER JOIN + -- doing inline select to limit rows to current user + (select * from watchlist where user_id = :USER_ID) w + ON w.movie_id = ads.ID + ``` + + - The above code extends the Popular Movies data that gets returned from the REST data source by joining the REST data source with the watchlist table to add two columns: BADGE\_LABEL and BADGE\_COLOR. For the BADGE\_LABEL column, each movie in the Popular Movies list has the value 'Watched' (movies in the WATCHLIST table that are marked as Watched), 'Added' (movies in the WATCHLIST table that are not marked as Watched), or NULL (movies that are not in the WATCHLIST table). Similarly, the BADGE\_COLOR list contains values 'u-success' or NULL, based on whether or not a movie is in the WATCHLIST table and not marked as Watched. + + ![Page 2 open in Page Designer with the Local Post Processing properties open in Property Editor](images/popular-lpp.png " ") + + * Click on the **Attributes** tab. + + * Icon and Badge → Badge Column: **BADGE\_LABEL** + + * Icon and Badge → Badge CSS Classes: **&BADGE\_COLOR.** + + ![Page 2 open in Page Designer with the Icon and Badge attributes open in Property Editor](images/popular-badge.png " ") + +2. To pass in the value for P3\_PREVIOUS\_PAGE\_ID, click on the **Full Card** action under the Popular Movies region. + + * In the Link properties group, click on **Target**. + + * Under Set Items, add an item: + + - Name: **P3\_PREVIOUS\_PAGE\_ID** + + - Value: **2** + + - Click **Ok**. + + ![Full Card action Link Builder Target open on Page 2 in Page Designer](images/popular-card-action.png " ") + +3. Now that you have set up badges on the Popular Movies region, return to the beginning of step 1 of this task and follow the same steps for Searched Movies. + +4. Save your changes and refresh the tab where your app is running. Now you can play around with the Movie Search and Movie Details page and test out adding, removing, and marking items as watched. + + * From the Movie Search page, select a movie and you will see the Back and Add to Watchlist buttons. + + ![Movie Details page with the Back and Add to Watchlist buttons at the top](images/add-runtime.png " ") + + * Click the Add to Watchlist button and you will be redirected back to the Movie Search page where you will see the Added label on the movie you added. + + ![Movie Search page in the runtime application with the Added label on the second popular movie Card](images/added.png " ") + + * Click on the movie you just added to your watchlist, and you will see the Back, Remove From Watchlist, and I've Watched This buttons. + + ![Movie Details page with the Back, Remove from Watchlist, and I've Watched This buttons at the top](images/remove-watched-runtime.png " ") + + * Click the I've Watched This button and you will be redirected back to the Movie Search page where you will see the Watched label on the movie you just marked as watched. + + ![Movie Search page in the runtime application with the Watched label on the second popular movie Card](images/watched.png " ") + +You now know how to use SQL commands in Page Designer regions and processes to get, store, update, and delete data from your tables. You may now **proceed to the next lab**. + +## Resources + +- [Buttons Documentation](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/creating-buttons.html) + +- [Understanding Page Processes](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/understanding-page-processes.html) + +- [Controlling Navigation Using Branches](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/controlling-navigation-using-branches.html) + +## Stuck? Download the Application Here +Stuck on a step or struggling with the lab? You can download a copy of the Movies Watchlist application through Lab 6 and follow the instructions below to import it into your Oracle APEX workspace. + +- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-6-231.sql) to download a copy of the app at the end of Lab 6. + +- You can import the app to your APEX workspace by clicking **Import** in the App Builder home page and following the wizard steps. + +- You will be prompted for the Credentials for Movies web credential that was set up in lab 2. You can see in the screenshot below that Credentials for Movies does not already exist in the workspace. +*Note: If you completed Lab 2, Credentials for Movies will already exist in your workspace and this will be pre-filled* + + ![APEX Install Application page with Web Credentials table without any Client ID and Client Secret for Credentials for Movies](images/blank-credentials.png " ") + +- If Credentials for Movies does not already within your workspace, set the following for the Credentials for Movies row: + + - In the Client ID or Username column, enter **api\_key**. + + - In the Client Secret or Password column, paste your unique API key that you got from The Movie Database. + + - In the Verify Client Secret/Password column, past your API key again. + + ![APEX Install Application page with Web Credentials table containing Client ID and Client Secret for Credentials for Movies](images/complete-credentials.png " ") + +- Click **Next**. + +- Make sure Install Supporting Objects is **on** and click **Next** again. + +- Click **Install** to install the supporting objects and finish importing the application. + +## Acknowledgements + +- **Author** - Paige Hanssen +- **Last Updated By/Date** - Paige Hanssen, May 2023 \ No newline at end of file diff --git a/apex-231/movies-lab/6-creating-details-buttons/images/add-behavior.png b/apex-231/movies-lab/6-creating-details-buttons/images/add-behavior.png new file mode 100644 index 00000000..72232dbe Binary files /dev/null and b/apex-231/movies-lab/6-creating-details-buttons/images/add-behavior.png differ diff --git a/apex-231/movies-lab/6-creating-details-buttons/images/add-button.png b/apex-231/movies-lab/6-creating-details-buttons/images/add-button.png new file mode 100644 index 00000000..516515b8 Binary files /dev/null and b/apex-231/movies-lab/6-creating-details-buttons/images/add-button.png differ diff --git a/apex-231/movies-lab/6-creating-details-buttons/images/add-process.png b/apex-231/movies-lab/6-creating-details-buttons/images/add-process.png new file mode 100644 index 00000000..ca438b50 Binary files /dev/null and b/apex-231/movies-lab/6-creating-details-buttons/images/add-process.png differ diff --git a/apex-231/movies-lab/6-creating-details-buttons/images/add-runtime.png b/apex-231/movies-lab/6-creating-details-buttons/images/add-runtime.png new file mode 100644 index 00000000..ebaed7d6 Binary files /dev/null and b/apex-231/movies-lab/6-creating-details-buttons/images/add-runtime.png differ diff --git a/apex-231/movies-lab/6-creating-details-buttons/images/add-ssc.png b/apex-231/movies-lab/6-creating-details-buttons/images/add-ssc.png new file mode 100644 index 00000000..8e19b26b Binary files /dev/null and b/apex-231/movies-lab/6-creating-details-buttons/images/add-ssc.png differ diff --git a/apex-231/movies-lab/6-creating-details-buttons/images/added.png b/apex-231/movies-lab/6-creating-details-buttons/images/added.png new file mode 100644 index 00000000..b1f6d006 Binary files /dev/null and b/apex-231/movies-lab/6-creating-details-buttons/images/added.png differ diff --git a/apex-231/movies-lab/6-creating-details-buttons/images/back-behavior.png b/apex-231/movies-lab/6-creating-details-buttons/images/back-behavior.png new file mode 100644 index 00000000..6204f482 Binary files /dev/null and b/apex-231/movies-lab/6-creating-details-buttons/images/back-behavior.png differ diff --git a/apex-231/movies-lab/6-creating-details-buttons/images/back-properties.png b/apex-231/movies-lab/6-creating-details-buttons/images/back-properties.png new file mode 100644 index 00000000..6c51a750 Binary files /dev/null and b/apex-231/movies-lab/6-creating-details-buttons/images/back-properties.png differ diff --git a/apex-231/movies-lab/6-creating-details-buttons/images/back-ssc.png b/apex-231/movies-lab/6-creating-details-buttons/images/back-ssc.png new file mode 100644 index 00000000..7131d732 Binary files /dev/null and b/apex-231/movies-lab/6-creating-details-buttons/images/back-ssc.png differ diff --git a/apex-231/movies-lab/6-creating-details-buttons/images/blank-credentials.png b/apex-231/movies-lab/6-creating-details-buttons/images/blank-credentials.png new file mode 100644 index 00000000..03bd59b8 Binary files /dev/null and b/apex-231/movies-lab/6-creating-details-buttons/images/blank-credentials.png differ diff --git a/apex-231/movies-lab/6-creating-details-buttons/images/buttons-region.png b/apex-231/movies-lab/6-creating-details-buttons/images/buttons-region.png new file mode 100644 index 00000000..a3acad30 Binary files /dev/null and b/apex-231/movies-lab/6-creating-details-buttons/images/buttons-region.png differ diff --git a/apex-231/movies-lab/6-creating-details-buttons/images/complete-credentials.png b/apex-231/movies-lab/6-creating-details-buttons/images/complete-credentials.png new file mode 100644 index 00000000..7a8806f0 Binary files /dev/null and b/apex-231/movies-lab/6-creating-details-buttons/images/complete-credentials.png differ diff --git a/apex-231/movies-lab/6-creating-details-buttons/images/delete-cancel.png b/apex-231/movies-lab/6-creating-details-buttons/images/delete-cancel.png new file mode 100644 index 00000000..fb6f8b8d Binary files /dev/null and b/apex-231/movies-lab/6-creating-details-buttons/images/delete-cancel.png differ diff --git a/apex-231/movies-lab/6-creating-details-buttons/images/popular-badge.png b/apex-231/movies-lab/6-creating-details-buttons/images/popular-badge.png new file mode 100644 index 00000000..c83df728 Binary files /dev/null and b/apex-231/movies-lab/6-creating-details-buttons/images/popular-badge.png differ diff --git a/apex-231/movies-lab/6-creating-details-buttons/images/popular-card-action.png b/apex-231/movies-lab/6-creating-details-buttons/images/popular-card-action.png new file mode 100644 index 00000000..6bb4c3d2 Binary files /dev/null and b/apex-231/movies-lab/6-creating-details-buttons/images/popular-card-action.png differ diff --git a/apex-231/movies-lab/6-creating-details-buttons/images/popular-lpp.png b/apex-231/movies-lab/6-creating-details-buttons/images/popular-lpp.png new file mode 100644 index 00000000..12cedf32 Binary files /dev/null and b/apex-231/movies-lab/6-creating-details-buttons/images/popular-lpp.png differ diff --git a/apex-231/movies-lab/6-creating-details-buttons/images/processing-tab.png b/apex-231/movies-lab/6-creating-details-buttons/images/processing-tab.png new file mode 100644 index 00000000..b3796c89 Binary files /dev/null and b/apex-231/movies-lab/6-creating-details-buttons/images/processing-tab.png differ diff --git a/apex-231/movies-lab/6-creating-details-buttons/images/redirect-branch.png b/apex-231/movies-lab/6-creating-details-buttons/images/redirect-branch.png new file mode 100644 index 00000000..86bf8d4f Binary files /dev/null and b/apex-231/movies-lab/6-creating-details-buttons/images/redirect-branch.png differ diff --git a/apex-231/movies-lab/6-creating-details-buttons/images/remove-button.png b/apex-231/movies-lab/6-creating-details-buttons/images/remove-button.png new file mode 100644 index 00000000..515f9323 Binary files /dev/null and b/apex-231/movies-lab/6-creating-details-buttons/images/remove-button.png differ diff --git a/apex-231/movies-lab/6-creating-details-buttons/images/remove-ssc.png b/apex-231/movies-lab/6-creating-details-buttons/images/remove-ssc.png new file mode 100644 index 00000000..fa1769ae Binary files /dev/null and b/apex-231/movies-lab/6-creating-details-buttons/images/remove-ssc.png differ diff --git a/apex-231/movies-lab/6-creating-details-buttons/images/remove-watched-runtime.png b/apex-231/movies-lab/6-creating-details-buttons/images/remove-watched-runtime.png new file mode 100644 index 00000000..ba0e0df0 Binary files /dev/null and b/apex-231/movies-lab/6-creating-details-buttons/images/remove-watched-runtime.png differ diff --git a/apex-231/movies-lab/6-creating-details-buttons/images/watched-button.png b/apex-231/movies-lab/6-creating-details-buttons/images/watched-button.png new file mode 100644 index 00000000..7e9a0252 Binary files /dev/null and b/apex-231/movies-lab/6-creating-details-buttons/images/watched-button.png differ diff --git a/apex-231/movies-lab/6-creating-details-buttons/images/watched-ssc.png b/apex-231/movies-lab/6-creating-details-buttons/images/watched-ssc.png new file mode 100644 index 00000000..02d19e93 Binary files /dev/null and b/apex-231/movies-lab/6-creating-details-buttons/images/watched-ssc.png differ diff --git a/apex-231/movies-lab/6-creating-details-buttons/images/watched.png b/apex-231/movies-lab/6-creating-details-buttons/images/watched.png new file mode 100644 index 00000000..f50e5c65 Binary files /dev/null and b/apex-231/movies-lab/6-creating-details-buttons/images/watched.png differ diff --git a/apex-231/movies-lab/7-implementing-watchlist-page/images/blank-credentials.png b/apex-231/movies-lab/7-implementing-watchlist-page/images/blank-credentials.png new file mode 100644 index 00000000..03bd59b8 Binary files /dev/null and b/apex-231/movies-lab/7-implementing-watchlist-page/images/blank-credentials.png differ diff --git a/apex-231/movies-lab/7-implementing-watchlist-page/images/complete-credentials.png b/apex-231/movies-lab/7-implementing-watchlist-page/images/complete-credentials.png new file mode 100644 index 00000000..7a8806f0 Binary files /dev/null and b/apex-231/movies-lab/7-implementing-watchlist-page/images/complete-credentials.png differ diff --git a/apex-231/movies-lab/7-implementing-watchlist-page/images/decade-facet.png b/apex-231/movies-lab/7-implementing-watchlist-page/images/decade-facet.png new file mode 100644 index 00000000..171d2dd3 Binary files /dev/null and b/apex-231/movies-lab/7-implementing-watchlist-page/images/decade-facet.png differ diff --git a/apex-231/movies-lab/7-implementing-watchlist-page/images/faceted-search.png b/apex-231/movies-lab/7-implementing-watchlist-page/images/faceted-search.png new file mode 100644 index 00000000..23e684fe Binary files /dev/null and b/apex-231/movies-lab/7-implementing-watchlist-page/images/faceted-search.png differ diff --git a/apex-231/movies-lab/7-implementing-watchlist-page/images/filter-position.png b/apex-231/movies-lab/7-implementing-watchlist-page/images/filter-position.png new file mode 100644 index 00000000..3ea43284 Binary files /dev/null and b/apex-231/movies-lab/7-implementing-watchlist-page/images/filter-position.png differ diff --git a/apex-231/movies-lab/7-implementing-watchlist-page/images/page-template.png b/apex-231/movies-lab/7-implementing-watchlist-page/images/page-template.png new file mode 100644 index 00000000..076136be Binary files /dev/null and b/apex-231/movies-lab/7-implementing-watchlist-page/images/page-template.png differ diff --git a/apex-231/movies-lab/7-implementing-watchlist-page/images/runtime-facet.png b/apex-231/movies-lab/7-implementing-watchlist-page/images/runtime-facet.png new file mode 100644 index 00000000..e7f6ddcc Binary files /dev/null and b/apex-231/movies-lab/7-implementing-watchlist-page/images/runtime-facet.png differ diff --git a/apex-231/movies-lab/7-implementing-watchlist-page/images/search-facet.png b/apex-231/movies-lab/7-implementing-watchlist-page/images/search-facet.png new file mode 100644 index 00000000..21917215 Binary files /dev/null and b/apex-231/movies-lab/7-implementing-watchlist-page/images/search-facet.png differ diff --git a/apex-231/movies-lab/7-implementing-watchlist-page/images/sort-by.png b/apex-231/movies-lab/7-implementing-watchlist-page/images/sort-by.png new file mode 100644 index 00000000..33f4aadb Binary files /dev/null and b/apex-231/movies-lab/7-implementing-watchlist-page/images/sort-by.png differ diff --git a/apex-231/movies-lab/7-implementing-watchlist-page/images/sort-values.png b/apex-231/movies-lab/7-implementing-watchlist-page/images/sort-values.png new file mode 100644 index 00000000..68cbc95f Binary files /dev/null and b/apex-231/movies-lab/7-implementing-watchlist-page/images/sort-values.png differ diff --git a/apex-231/movies-lab/7-implementing-watchlist-page/images/watched-facet.png b/apex-231/movies-lab/7-implementing-watchlist-page/images/watched-facet.png new file mode 100644 index 00000000..9077b43a Binary files /dev/null and b/apex-231/movies-lab/7-implementing-watchlist-page/images/watched-facet.png differ diff --git a/apex-231/movies-lab/7-implementing-watchlist-page/images/watchlist-action.png b/apex-231/movies-lab/7-implementing-watchlist-page/images/watchlist-action.png new file mode 100644 index 00000000..081681fb Binary files /dev/null and b/apex-231/movies-lab/7-implementing-watchlist-page/images/watchlist-action.png differ diff --git a/apex-231/movies-lab/7-implementing-watchlist-page/images/watchlist-attributes-1.png b/apex-231/movies-lab/7-implementing-watchlist-page/images/watchlist-attributes-1.png new file mode 100644 index 00000000..83b6f9b5 Binary files /dev/null and b/apex-231/movies-lab/7-implementing-watchlist-page/images/watchlist-attributes-1.png differ diff --git a/apex-231/movies-lab/7-implementing-watchlist-page/images/watchlist-attributes-2.png b/apex-231/movies-lab/7-implementing-watchlist-page/images/watchlist-attributes-2.png new file mode 100644 index 00000000..527649fd Binary files /dev/null and b/apex-231/movies-lab/7-implementing-watchlist-page/images/watchlist-attributes-2.png differ diff --git a/apex-231/movies-lab/7-implementing-watchlist-page/images/watchlist-order-by.png b/apex-231/movies-lab/7-implementing-watchlist-page/images/watchlist-order-by.png new file mode 100644 index 00000000..d169068f Binary files /dev/null and b/apex-231/movies-lab/7-implementing-watchlist-page/images/watchlist-order-by.png differ diff --git a/apex-231/movies-lab/7-implementing-watchlist-page/images/watchlist-page-runtime.png b/apex-231/movies-lab/7-implementing-watchlist-page/images/watchlist-page-runtime.png new file mode 100644 index 00000000..503273d6 Binary files /dev/null and b/apex-231/movies-lab/7-implementing-watchlist-page/images/watchlist-page-runtime.png differ diff --git a/apex-231/movies-lab/7-implementing-watchlist-page/images/watchlist-runtime.png b/apex-231/movies-lab/7-implementing-watchlist-page/images/watchlist-runtime.png new file mode 100644 index 00000000..c5f0bd1b Binary files /dev/null and b/apex-231/movies-lab/7-implementing-watchlist-page/images/watchlist-runtime.png differ diff --git a/apex-231/movies-lab/7-implementing-watchlist-page/images/watchlist.png b/apex-231/movies-lab/7-implementing-watchlist-page/images/watchlist.png new file mode 100644 index 00000000..52f23b97 Binary files /dev/null and b/apex-231/movies-lab/7-implementing-watchlist-page/images/watchlist.png differ diff --git a/apex-231/movies-lab/7-implementing-watchlist-page/implementing-watchlist-page.md b/apex-231/movies-lab/7-implementing-watchlist-page/implementing-watchlist-page.md new file mode 100644 index 00000000..34a13637 --- /dev/null +++ b/apex-231/movies-lab/7-implementing-watchlist-page/implementing-watchlist-page.md @@ -0,0 +1,349 @@ +# Implement the Watchlist Page + +## Introduction +Now that you have implemented functionality to find movies and add them to a table, you will set up the My Watchlist page to display each movie in that table, filter it, and modify it, which is the final piece of base functionality you will need to complete this app. + +Estimated Lab Time: 25 minutes + +Watch the video below for a quick walk-through of the lab. +[Implement the Watchlist Page](videohub:1_2xjo60jy) + +### Objectives +In this lab, you will: +- Create cards to display watchlist movies. +- Connect the Movie Details page to open details directly from the Watchlist. +- Add facets to filter through movies. + +### Prerequisites +- Completion of workshop through Lab 6 + +## Task 1: Create the Watchlist Cards +So far, you have only added a button in the Breadcrumb Bar region of page 1. You will start to build out the page by first adding a Cards region so that users can view their personal list of movies. It will be similar to the Cards regions on the Movie Search page, but these cards will be formatted a little differently and the source will not be a REST data source. + +1. Navigate to **page 1** of your Movies Watchlist application. + +2. Right click on the Body position in the rendering tree and select **Create Region**. + +3. Set the following properties for the new region: + + * Title: **Watchlist** + + * Type: **Cards** + + * Source → Type: **SQL Query** + + * Copy the code below and paste it into the SQL Query code box: + + ``` + + select id, + movie_id, + user_id, + watched_yn, + watched, + case when watched_yn = 'Y' then 'Watched' end as WATCHED_LABEL, + case when watched_yn = 'Y' + then 'Marked as watched ' || apex_util.get_since(watched) + else 'Added to watchlist ' || apex_util.get_since(created) + end as movie_status, + title, + poster_url, + release_date, + to_char(release_date, 'YYYY') as release_year, + floor( to_char(release_date, 'YYYY') / 10) * 10 as decade, + runtime, + vote_average, + created, + to_char(created, 'MM/YYYY') as created_on, + created_by, + updated, + updated_by + from watchlist + where user_id = :USER_ID + ``` + + ![Page 1 open in Page Designer with the Watchlist region open in Property Editor](images/watchlist.png " ") + +4. Go to the Attributes tab of your new Watchlist region to customize your Watchlist cards. + + * Appearance → Layout: **Horizontal (Row)** + + * Card → Primary Key Column 1: **ID** + + * Title → Column: **TITLE** + + ![Page 1 open in Page Designer with the Watchlist region attributes open in Property Editor](images/watchlist-attributes-1.png " ") + + * Body → Advanced Formatting: **on** + + * Body → HTML Expression: + + ``` + + Release Year: &RELEASE_YEAR. + <br> + Rating: &VOTE_AVERAGE. + ``` + + * Secondary Body → Column: **MOVIE\_STATUS** + + * Icon and Badge → Badge Column: **WATCHED\_LABEL** + + * Media → Source: **URL Column** + + * Media → URL: **POSTER\_URL** + + ![Page 1 open in Page Designer with the Watchlist region attributes open in Property Editor](images/watchlist-attributes-2.png " ") + +## Task 2: Connect the Watchlist to the Movie Details Page +In this step, you are going to connect the My Watchlist page to the Movie Details page to allow a user to view details for any movie on the list, as well as remove a movie from their list or mark a movie as "Watched." + +1. In the rendering pane, right click on the Actions section underneath the Watchlist region and select **Create Action**. + +2. Set the following properties: + + * Identification → Type: **Full Card** + + * Click on the Link → Target field to open the link builder. + + - Page: **3** + + - Set Items: + + + Name: **P3\_ID** | Value: **&MOVIE\_ID.** + + + Name: **P3\_PREVIOUS\_PAGE\_ID** | Value: **1** + + - Click **Ok**. + + ![Link Builder Target dialog for Watchlist Full Card action open over Page 1 in Page Designer](images/watchlist-action.png " ") + +3. Save and run the page. + + ![Watchlist Cards region on the My Watchlist page in the runtime application](images/watchlist-runtime.png " ") + +4. On the tab where the app is running, click on a movie in your watchlist. The Movie Details dialog will pop up with information about that specific movie. Note that you are able to remove a movie or mark it as watched, but you cannot add the movie because it is already in your list. Additionally, there is no back button because you are going to the Movie Details page from the Watchlist page (page 1) instead of the Movie Search page (page 2). +*Note: If you have not added any movies to your watch list, the page will say "No data found." Make sure to add movies to your watch list so that you can view them on the Watchlist page!* + +## Task 3: Add the Faceted Search +The next step is allowing a user to filter through movies in their watchlist to make it easier to explore and find movies they could watch based on specific criteria. You'll do this by using a Faceted Search to create facets for columns we can filter the movie list with. + +1. In the Page Designer tab in your browser, right click on the Body region and select **Create Region**. + +2. Set the following properties: + + * Identification → Title: **Filter** + + * Identification → Type: **Faceted Search** + + * Source → Filtered Region: **Watchlist** + + * Appearance → Template: **Blank with Attributes** + + ![Page 1 open in Page Designer with the new Filter region open in Property Editor](images/faceted-search.png " ") + +3. If you look at the layout pane in the middle of Page Designer, the faceted search Filter region is underneath the Watchlist region and that is how it will appear in the runtime app. That is not a very convenient place and it would be better if the faceted search was sitting on the left side of the Watchlist region so users have easy access. You can change the page template to open up new positions on the page that the Filter region can go in, one of which is the Left Column. + +4. At the top of the the Rendering Pane, click on **Page 1: My Watchlist**. + +5. In the **Appearance** property group, set Page Template to **Left Side Column**. + + ![Page 1 open in Page Designer with Page open in Property Editor](images/page-template.png " ") + +6. Click on the Filter region and set: + + * Layout → Position: **Left Column** + + ![Page 1 open in Page Designer with the Filter region open in Property Editor](images/filter-position.png " ") + +7. Notice that the facet **P1_SEARCH** was automatically created with the Faceted Search region. + + * Click on P1_SEARCH and set Source → Database Column(s) to **TITLE** + + ![Page 1 open in Page Designer with the P1_SEARCH facet open in Property Editor](images/search-facet.png " ") + +8. Right click on the Facets section under the Filter region and select **Create Facet**. + + * Identification → Name: **P1\_WATCHED\_YN** + + * Label: **Watched** + + * List of Values → Type: **Static Values** + + * Click on the box next to List of Values → Static Values to manually set up the display values that you will use for this facet. + + - Under Values: + + + Display Value: **Yes**, Return Value: **Y** + + + Display Value: **No**, Return Value: **N** + + - Sort → Sort at Runtime: **off** + + - Click **Ok**. + + ![P1_WATCHED_YN Static Values dialog open over Page 1 in Page Designer](images/watched-facet.png " ") + + * Actions Menu → Filter: **off** + + * Actions Menu → Chart: **off** + + * Oracle APEX auto-fills the Source based on the facet name. + +9. You are going to add two more facets to allow a user to filter by release decade and runtime using the DECADE and RUNTIME columns. The DECADE column was created within the Watchlist Source SQL select statement as a simpler date column to filter movies by instead of RELEASE\_DATE. + +10. Create a new facet within the Filter region and set the following properties: + + * Identification → Name: **P1\_DECADE** + + * List of Values → Type: **Distinct Values** + + * List Entries → Sort By Top Counts: **off** + + * Actions Menu → Filter: **off** + + * Actions Menu → Chart: **off** + + * Source → Data Type: **Number** + *Note: Again, Source auto-filled based on the Name of the facet. However, the data type did not change, so you have to manually change it to match the type of data in the DECADE column.* + + ![Page 1 open in Page Designer with the P1_DECADE facet region open in Property Editor](images/decade-facet.png " ") + +11. Create another new facet within the Filter region and set the following properties: + + * Identification → Name: **P1\_RUNTIME** + + * Identification → Type: **Range** + + * Settings → Select Multiple: **on** + + * List of Values → Type: **Static Values** + + * Click on the box next to Static Values to manually set up the display values that you will use for this facet. + + - Under Values: + + + Display Value: **Over 2 hours**, Return Value: **120|** + + + Display Value: **90 minutes to 2 hours**, Return Value: **90|120** + + + Display Value: **Less than 90 minutes**, Return Value: **|90** + *Note: The | syntax is used to define a range of return values. To learn more, see the Resources section at the end of this lab.* + + - Sort → Sort at Runtime: **off**  + + - Click **Ok**. + + ![P1_RUNTIME Static Values dialog open over Page 1 in Page Designer](images/runtime-facet.png " ") + + * Actions Menu → Filter: **off** + + * Actions Menu → Chart: **off** + + * Source → Data Type: **Number** + +12. Click **Save**. + +## Task 4: Add a Sort By Item +In addition to the Faceted Search, it would be helpful for there to be a "Sort By" feature that allows users to reorder their list of movies a few different ways. + +1. Right click on the Watchlist region in the rendering pane and select **Create Page Item**. + +2. Set the following properties: + + * Name: **P1\_SORT\_BY** + + * Type: **Select List** + + ![Page 1 open in Page Designer with the P1_SORT_BY item open in Property Editor](images/sort-by.png " ") + + * List of Values → Type: **Static Values** + + * Within the List of Values → Static Values dialog: + + + Display Value: **Title**, Return Value: **TITLE** + + + Display Value: **Rating**, Return Value: **RATING** + + + Display Value: **Date Added**, Return Value: **RECENT** + + + Sort → Sort at Runtime: **off** + + + Click **Ok**. + + * List of Values → Display Null Value: **off** + + * Advanced → Warn on Unsaved Changes: **Ignore** + + ![P1_SORT_BY Static Values dialog open on Page 1 in Page Designer](images/sort-values.png " ") + +3. At this point, the sort item has been created but is not connected to anything else on the page. + +4. You want the value of the Sort By page item to define what the Watchlist Cards region `order by` is, so you will use the Cards Order By properties to link the P1\_SORT\_BY item and use its value to order by the associated column. + +5. Click on the **Watchlist** region. + + * Source → Order By Item: + + - Item → Name: **P1\_SORT\_BY** + + - The Key and Display values auto-fill with the values set in the P1\_SORT\_BY item, but you will need to add the Order By clause for each. + + - Title Clause: **"TITLE" asc** + + - Rating Clause: **"VOTE_AVERAGE" desc** + + - Recent Clause: **"CREATED" desc** + + - Click **Ok**. + + ![Watchlist region Order By Item dialog open on Page 1 in Page Designer](images/watchlist-order-by.png " ") + +6. Save and run the page to test out your app. + + ![My Watchlist page in the runtime application showing the Cards region, Faceted Search, and Sort By](images/watchlist-page-runtime.png " ") + +You now know how to filter data using a Faceted Search and sort data with a select list. You may now **proceed to the next lab**. + +## Resources + +- [Intro to Faceted Search](https://www.youtube.com/watch?v=xsA9SCFHDDI) + +- **Range Facet Syntax:** When implementing the static list of values for the Range facet in the Faceted Search region in this lab, you use the | symbol to help define the return value for each item in the static list. The | character represents a range of values that the movies in the Watchlist will be filtered on. + + For example, when setting up the P1_RUNTIME facet, the first value in the list is "Over 3 hours" and has a return value of 180|. Because you are defining a facet that represents a range, the return value 180| means that you are searching for all movies that have a runtime in the range of 180 or higher. + + The second value in the P1_RUNTIME list is "2 to 3 hours," which has the return value 120|180. Here, the | symbol represents all the values between 120 and 180, meaning that when this option is selected, you will get all movies with a runtime of anything between 120 and 180. + +## Stuck? Download the Application Here +Stuck on a step or struggling with the lab? You can download a copy of the Movies Watchlist application through Lab 7 and follow the instructions below to import it into your Oracle APEX workspace. + +- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-7-231.sql) to download a copy of the app at the end of Lab 7. + +- You can import the app to your APEX workspace by clicking **Import** in the App Builder home page and following the wizard steps. + +- You will be prompted for the Credentials for Movies web credential that was set up in lab 2. You can see in the screenshot below that Credentials for Movies does not already exist in the workspace. +*Note: If you completed Lab 2, Credentials for Movies will already exist in your workspace and this will be pre-filled* + + ![APEX Install Application page with Web Credentials table without any Client ID and Client Secret for Credentials for Movies](images/blank-credentials.png " ") + +- If Credentials for Movies does not already within your workspace, set the following for the Credentials for Movies row: + + - In the Client ID or Username column, enter **api\_key**. + + - In the Client Secret or Password column, paste your unique API key that you got from The Movie Database. + + - In the Verify Client Secret/Password column, past your API key again. + + ![APEX Install Application page with Web Credentials table containing Client ID and Client Secret for Credentials for Movies](images/complete-credentials.png " ") + +- Click **Next**. + +- Make sure Install Supporting Objects is **on** and click **Next** again. + +- Click **Install** to install the supporting objects and finish importing the application. + +## Acknowledgements + +- **Author** - Paige Hanssen +- **Last Updated By/Date** - Paige Hanssen, May 2023 \ No newline at end of file diff --git a/apex-231/movies-lab/8-adding-cast-list/adding-cast-list.md b/apex-231/movies-lab/8-adding-cast-list/adding-cast-list.md new file mode 100644 index 00000000..0109f793 --- /dev/null +++ b/apex-231/movies-lab/8-adding-cast-list/adding-cast-list.md @@ -0,0 +1,123 @@ +# Add Cast List to Movie Details Page (Optional) + +## Introduction +This next lab is optional, but it would be fun and informative if a user were able to see not only the basic details of a movie but also the cast list when they open the Movie Details page. The steps are very similar to most of the work you have already done, but this lab will walk you through adding Cast Cards to your Movie Details page. + +Estimated Lab Time: 5 minutes + +### Objectives +In this lab, you will: +- Use the Movie Cast REST data source to add Cast Cards the Movie Details page. + +### Prerequisites +- Completion of workshop through Lab 4 + +## Task 1: Add the Cast Region to Movie Details Page +You already created the Movie Cast REST data source in Lab 2, and now you can use it on the Details page to display the cast list along with the movie details and overview to bring everything together. + +1. Navigate to the **Movie Details** page of your Movies Watchlist application. + +2. Right click on Content Body in the rendering pane and select **Create Region**. + + * Title: **Cast** + + * Type: **Cards** + + * Source → Location: **REST Source** + + * Source → REST Source: **Movie Cast** + + * Appearance → Template: **Content Block** + + * Appearance → open the Template Options dialog: + + - Region Title: **Small** + + - Click **Ok**. + + ![Cast Card region open in Property Editor on Page 3 in Page Designer](images/cast.png " ") + +3. Click on the Attributes tab and set the following: + + * Appearance → Grid Columns: **5 Columns** + + * Card → Primary Key Column 1: **ID** + + * Title Column: **CHARACTER** + + * Subtitle → Column: **NAME** + + * Media → Source: **Image URL** + + * Media → URL: **https://image.tmdb.org/t/p/w500&PROFILE\_PATH.** + + * Media → Position: **First** + + * Media → Appearance: **Square** + + * Media → Sizing: **Cover** + + * Pagination → Type: **Page** + + * Pagination → Cards per Page: **10** + + ![Cast Card region attributes open in Property Editor on Page 3 in Page Designer](images/cast-attributes.png " ") + +4. Under the Cast region in the rendering pane, expand the **Parameters** dropdown. + +5. Click on **movie\_id**. + +6. Set the following properties: + + * Type: **Item** + + * Item: **P3\_ID** + +7. Click **Save**. + + ![Cast region movie_id parameter open in Property Editor on Page 3 in Page Designer](images/cast-parameter.png " ") + +8. Refresh the tab where your app is running and click on a movie either from your Watchlist or from the Movie Search to view the updated Movie Details page. + + ![Movie Details page open in the Movies Watchlist Runtime application](images/cast-runtime.png " ") + +You have now improved the Movie Details page further by displaying a list of cast members along with the movie header and overview. You may now **proceed to the next lab**. + +## Resources + +- [REST Data Sources Documentation](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/managing-REST-data-sources.html) + +- [Cards Documentation](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/managing-cards.html) + +## Stuck? Download the Application Here +Stuck on a step or struggling with the lab? You can download a copy of the Movies Watchlist application through this lab and follow the instructions below to import it into your Oracle APEX workspace. + +- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-8-231.sql) to download a copy of the app at the end of this lab. + +- You can import the app to your APEX workspace by clicking **Import** in the App Builder home page and following the wizard steps. + +- You will be prompted for the Credentials for Movies web credential that was set up in lab 2. You can see in the screenshot below that Credentials for Movies does not already exist in the workspace. +*Note: If you completed Lab 2, Credentials for Movies will already exist in your workspace and this will be pre-filled* + + ![APEX Install Application page with Web Credentials table without any Client ID and Client Secret for Credentials for Movies](images/blank-credentials.png " ") + +- If Credentials for Movies does not already within your workspace, set the following for the Credentials for Movies row: + + - In the Client ID or Username column, enter **api\_key**. + + - In the Client Secret or Password column, paste your unique API key that you got from The Movie Database. + + - In the Verify Client Secret/Password column, past your API key again. + + ![APEX Install Application page with Web Credentials table containing Client ID and Client Secret for Credentials for Movies](images/complete-credentials.png " ") + +- Click **Next**. + +- Make sure Install Supporting Objects is **on** and click **Next** again. + +- Click **Install** to install the supporting objects and finish importing the application. + +## Acknowledgements + +- **Author** - Paige Hanssen +- **Last Updated By/Date** - Paige Hanssen, May 2023 \ No newline at end of file diff --git a/apex-231/movies-lab/8-adding-cast-list/images/blank-credentials.png b/apex-231/movies-lab/8-adding-cast-list/images/blank-credentials.png new file mode 100644 index 00000000..03bd59b8 Binary files /dev/null and b/apex-231/movies-lab/8-adding-cast-list/images/blank-credentials.png differ diff --git a/apex-231/movies-lab/8-adding-cast-list/images/cast-attributes.png b/apex-231/movies-lab/8-adding-cast-list/images/cast-attributes.png new file mode 100644 index 00000000..b246297f Binary files /dev/null and b/apex-231/movies-lab/8-adding-cast-list/images/cast-attributes.png differ diff --git a/apex-231/movies-lab/8-adding-cast-list/images/cast-parameter.png b/apex-231/movies-lab/8-adding-cast-list/images/cast-parameter.png new file mode 100644 index 00000000..c1a71670 Binary files /dev/null and b/apex-231/movies-lab/8-adding-cast-list/images/cast-parameter.png differ diff --git a/apex-231/movies-lab/8-adding-cast-list/images/cast-runtime.png b/apex-231/movies-lab/8-adding-cast-list/images/cast-runtime.png new file mode 100644 index 00000000..f5134471 Binary files /dev/null and b/apex-231/movies-lab/8-adding-cast-list/images/cast-runtime.png differ diff --git a/apex-231/movies-lab/8-adding-cast-list/images/cast.png b/apex-231/movies-lab/8-adding-cast-list/images/cast.png new file mode 100644 index 00000000..ebaac9f9 Binary files /dev/null and b/apex-231/movies-lab/8-adding-cast-list/images/cast.png differ diff --git a/apex-231/movies-lab/8-adding-cast-list/images/complete-credentials.png b/apex-231/movies-lab/8-adding-cast-list/images/complete-credentials.png new file mode 100644 index 00000000..7a8806f0 Binary files /dev/null and b/apex-231/movies-lab/8-adding-cast-list/images/complete-credentials.png differ diff --git a/apex-231/movies-lab/9-improving-app/images/app-definition.png b/apex-231/movies-lab/9-improving-app/images/app-definition.png new file mode 100644 index 00000000..62d2af76 Binary files /dev/null and b/apex-231/movies-lab/9-improving-app/images/app-definition.png differ diff --git a/apex-231/movies-lab/9-improving-app/images/app-footer.png b/apex-231/movies-lab/9-improving-app/images/app-footer.png new file mode 100644 index 00000000..41a6528e Binary files /dev/null and b/apex-231/movies-lab/9-improving-app/images/app-footer.png differ diff --git a/apex-231/movies-lab/9-improving-app/images/blank-credentials.png b/apex-231/movies-lab/9-improving-app/images/blank-credentials.png new file mode 100644 index 00000000..03bd59b8 Binary files /dev/null and b/apex-231/movies-lab/9-improving-app/images/blank-credentials.png differ diff --git a/apex-231/movies-lab/9-improving-app/images/complete-credentials.png b/apex-231/movies-lab/9-improving-app/images/complete-credentials.png new file mode 100644 index 00000000..7a8806f0 Binary files /dev/null and b/apex-231/movies-lab/9-improving-app/images/complete-credentials.png differ diff --git a/apex-231/movies-lab/9-improving-app/images/final-app.png b/apex-231/movies-lab/9-improving-app/images/final-app.png new file mode 100644 index 00000000..61055541 Binary files /dev/null and b/apex-231/movies-lab/9-improving-app/images/final-app.png differ diff --git a/apex-231/movies-lab/9-improving-app/images/get-started-runtime.png b/apex-231/movies-lab/9-improving-app/images/get-started-runtime.png new file mode 100644 index 00000000..d1b260cb Binary files /dev/null and b/apex-231/movies-lab/9-improving-app/images/get-started-runtime.png differ diff --git a/apex-231/movies-lab/9-improving-app/images/get-started-ssc.png b/apex-231/movies-lab/9-improving-app/images/get-started-ssc.png new file mode 100644 index 00000000..eb8a7738 Binary files /dev/null and b/apex-231/movies-lab/9-improving-app/images/get-started-ssc.png differ diff --git a/apex-231/movies-lab/9-improving-app/images/get-started.png b/apex-231/movies-lab/9-improving-app/images/get-started.png new file mode 100644 index 00000000..5ddebffe Binary files /dev/null and b/apex-231/movies-lab/9-improving-app/images/get-started.png differ diff --git a/apex-231/movies-lab/9-improving-app/images/nav-menu.png b/apex-231/movies-lab/9-improving-app/images/nav-menu.png new file mode 100644 index 00000000..8bca6b1d Binary files /dev/null and b/apex-231/movies-lab/9-improving-app/images/nav-menu.png differ diff --git a/apex-231/movies-lab/9-improving-app/images/watchlist-css.png b/apex-231/movies-lab/9-improving-app/images/watchlist-css.png new file mode 100644 index 00000000..c4f46192 Binary files /dev/null and b/apex-231/movies-lab/9-improving-app/images/watchlist-css.png differ diff --git a/apex-231/movies-lab/9-improving-app/images/watchlist-runtime.png b/apex-231/movies-lab/9-improving-app/images/watchlist-runtime.png new file mode 100644 index 00000000..eb3f0274 Binary files /dev/null and b/apex-231/movies-lab/9-improving-app/images/watchlist-runtime.png differ diff --git a/apex-231/movies-lab/9-improving-app/images/watchlist-ssc.png b/apex-231/movies-lab/9-improving-app/images/watchlist-ssc.png new file mode 100644 index 00000000..fc0456bc Binary files /dev/null and b/apex-231/movies-lab/9-improving-app/images/watchlist-ssc.png differ diff --git a/apex-231/movies-lab/9-improving-app/improving-watchlist-page.md b/apex-231/movies-lab/9-improving-app/improving-watchlist-page.md new file mode 100644 index 00000000..97713f82 --- /dev/null +++ b/apex-231/movies-lab/9-improving-app/improving-watchlist-page.md @@ -0,0 +1,177 @@ +# Improve the UI (Optional) + +## Introduction +There are a few more additions you can make to your app to really pull it all together and create the best user experience possible. This includes adding a welcome region for users when their Watchlist is empty to help them get started, customizing the Watchlist Cards with CSS, and cleaning up the UI to remove unnecessary items. + +Estimated Lab Time: 5 minutes + +### Objectives +In this lab, you will: +- Add a Get Started region to the My Watchlist page. +- Add custom CSS to the My Watchlist page. +- Remove the navigation menu. +- Add the Oracle APEX footer. + +### Prerequisites +- Completion of workshop through Lab 7 + +## Task 1: Create a Get Started Region +When a user logs into the Movies Watchlist app for the first time, they will not have any movies and the My Watchlist page will be blank. It would be helpful if there were a welcome message to assist users in getting started if there are no movies on the page. + +1. In the Page Designer tab in your browser, navigate to page 1 of your application. + +2. In the rendering pane, right click on Body and select **Create Region**. + + * Title: **Get Started** + + * Copy the below HTML code and paste it into the HTML Code box within the Source attribute group: + + ``` + + <strong>Welcome to your Watchlist!</strong> + <br> + <br> + To search for movies and add them to your list, click on the <strong>Add a Movie</strong> button above. + ``` + + ![Get Started region open in Property Editor on Page 1 in Page Designer](images/get-started.png " ") + +3. You also will need to add Server-side Conditions for the Get Started region and all other items within the Content Body page position, because you want to only show the Get Started region when a user has no movies in their watchlist. You only want to display the movie list, search, and sort by regions when a user has movies in their watchlist. + +4. In the Get Started region, scroll down to **Server-side Condition**. + + * Type: **No Rows returned** + + * SQL Query: + + ``` + + select null + from watchlist + where user_id = :USER_ID + ``` + + ![Close-up of Get Started region server-side condition](images/get-started-ssc.png " ") + +5. You will use the same SQL Query in the Server-side Conditions for the Watchlist and Search Bar regions, but you will use the opposite type, Rows returned. + +6. Click on the Watchlist region. + +7. In Server-side Condition: + + * Type: **Rows returned** + + * SQL Query: + + ``` + + select null + from watchlist + where user_id = :USER_ID + ``` + + ![Close-up of Watchlist region server-side condition](images/watchlist-ssc.png " ") + +8. Save and run the page. You can test out your Get Started region by removing all the movies off your watchlist. + + ![My Watchlist page in runtime application showing the Get Started region and no movie cards](images/get-started-runtime.png " ") + +## Task 2: Style the Movie Cards +On the My Watchlist page, the cards that display the movies in the watchlist are very tall, and you can only see one full movie at a time without scrolling. It would be much better if you were able to view multiple movies on the same screen without having to scroll. You can add a little custom CSS to make this happen. + +1. In the rendering pane, click on **Page 1: My Watchlist**. + +2. Scroll down to the CSS property group. + +3. Copy the code below and paste it within the Inline code editor: + + ``` + + :root { + /* Updating movie title size to make it more prominent */ + --a-cv-title-font-size: 24px; + --a-cv-title-line-height: 1.5; + } + + /* Update default width of images */ + .a-CardView-items--row .has-media { + grid-template-columns: minmax(32px,128px) minmax(0,var(--a-cv-icon-spacer,44px)) 1fr minmax(0,auto); + } + ``` + + ![Page 1 open in Page Designer with Page CSS properties in Property Editor](images/watchlist-css.png " ") + +4. Save and run page 1. You will see that the height of the cards has decreased and the title of the movies within the cards has increased. + + ![My Watchlist page in runtime application with new CSS applied to movie cards](images/watchlist-runtime.png " ") + +## Task 3: Add Footer and Remove Navigation +You can put a couple finishing touches on your app UI by modifying the Application Definition, which contain properties that are applied across the entire app instead of individual pages and regions. + +1. In the Page Designer tab, go to your Application home. + +2. Click **Edit Application Definition**. + + ![Application Hom with Edit Application Definition button highlighted](images/app-definition.png " ") + +3. Click on **User Interface**. + +4. Click the **Attributes** tab. + + * Set "Built with APEX" to Footer: **on** + + ![User Interface page with Attributes tab selected and Add "Built with APEX" to Footer set to Yes](images/app-footer.png " ") + +5. Because you only have one normal page and two modal dialog pages, it does not make much sense to have a navigation menu, so you can turn the navigation off. + + * Click the **Navigation Menu** tab. + + * Display Navigation: **off** + +6. Click **Apply Changes**. + + ![User Interface page with Navigation Menu tab selected and Display Navigation switch set to Yes](images/nav-menu.png " ") + +7. Refresh the tab your Movies Watchlist application is running in to use your completed app. + + ![My Watchlist page open in Movies Watchlist runtime application](images/final-app.png " ") + +You have now completed your Movies Watchlist application and can search for movies and add them to your watchlist. However, there are many ways to continue to add functionality to and customize your application. You can check out the Resources section in this lab to learn about different ways you can enhance your app, including components that you can implement and API requests you can make to get additional data. + +## Resources +- [Universal Theme Components](https://apex.oracle.com/pls/apex/apex_pm/r/ut/components) + +- [The Movie Database API](https://developers.themoviedb.org/3/getting-started/introduction) + +## Stuck? Download the Application Here +Stuck on a step or struggling with the lab? You can download a copy of the Movies Watchlist application and follow the instructions below to import it into your Oracle APEX workspace. + +- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-9-231.sql) to download a copy of the completed app. + +- You can import the app to your APEX workspace by clicking **Import** in the App Builder home page and following the wizard steps. + +- You will be prompted for the Credentials for Movies web credential that was set up in lab 2. You can see in the screenshot below that Credentials for Movies does not already exist in the workspace. +*Note: If you completed Lab 2, Credentials for Movies will already exist in your workspace and this will be pre-filled* + + ![APEX Install Application page with Web Credentials table without any Client ID and Client Secret for Credentials for Movies](images/blank-credentials.png " ") + +- If Credentials for Movies does not already within your workspace, set the following for the Credentials for Movies row: + + - In the Client ID or Username column, enter **api\_key**. + + - In the Client Secret or Password column, paste your unique API key that you got from The Movie Database. + + - In the Verify Client Secret/Password column, past your API key again. + + ![APEX Install Application page with Web Credentials table containing Client ID and Client Secret for Credentials for Movies](images/complete-credentials.png " ") + +- Click **Next**. + +- Make sure Install Supporting Objects is **on** and click **Next** again. + +- Click **Install** to install the supporting objects and finish importing the application. + +## Acknowledgements + +- **Author** - Paige Hanssen +- **Last Updated By/Date** - Paige Hanssen, May 2023 \ No newline at end of file diff --git a/apex-231/movies-lab/README.md b/apex-231/movies-lab/README.md new file mode 100644 index 00000000..d580cab7 --- /dev/null +++ b/apex-231/movies-lab/README.md @@ -0,0 +1,71 @@ +# Oracle APEX Hands-On Lab + +## Create a Movies Watchlist + +## Overview +In this workshop, you will build a mobile-friendly Movie Watchlist app that you and your friends can use to search for movies and add them to your own personal movie watchlists. + +The app will source data from [The Movie Database (TMDB)](https://www.themoviedb.org/), an online community-based database with metadata for thousands of movies and TV shows, and an extensive API. + +The workshop is organized into a total of ten labs, with the last two being optional. First, you will get your APEX environment and set up an API key on TMDB. Then, you will create REST Data Sources in APEX to connect to TMDB, and begin developing! + +It will take about two hours to complete the workshop, but your time may vary depending on your experience with APEX. If you get stuck, don't worry! At the end of each lab, you will find an app export that will get you across the finish line. + +Upon completing this workshop, you will have your very own simple movies watchlist app that is fun and easy to use! From there, you can continue to enhance this app by applying the concepts and techniques you learned. For example, you can use the Star Rating item to rate a movie once its been watched, or show which streaming providers have the movie using TMDB's rich API. The possibilities are endless, and you'll be fully prepared for your next movie night! + +### Lab Objectives +In this lab, you will: +- Obtain a free development environment. +- Learn how to create REST data sources. +- Learn how to create local tables. +- Learn how to use application items and processes. +- Learn how to create a page to view data from a REST source. +- Learn how to create a page to view data from a local table. +- Learn how to search for movies. +- Learn how to manage a list of movies. + +Estimated Workshop Time: 2 hours + +*Note: This lab assumes you are using Oracle APEX 21.2.* + +### Lab Modules + +| # | Module | Est. Time | +| --- | --- | --- | +| - | [Getting Started](?lab=signing-up.md) | 5 min | +| 1 | [Create the Application](?lab=create-app) | 5 min | +| 2 | [Create REST Data Sources](?lab=creating-rest-sources) | 15 min | +| 3 | [Create the Movie Search Page](?lab=creating-movie-search-page) | 20 min | +| 4 | [Create the Movie Details Page](?lab=creating-movie-details-page) | 10 min | +| 5 | [Create Local Tables](?lab=creating-tables) | 10 min | +| 6 | [Implement Buttons and Badges](?lab=creating-buttons-badges) | 15 min | +| 7 | [Implement the Watchlist Page](?lab=implementing-watchlist-page) | 20 min | +| 8 | [Improve the Movie Details Page](?lab=improving-details-page) | 10 min | +| 9 | [Add Cast List (Optional)](?lab=adding-cast-list) | 10 min | +| 10 | [Improve the Watchlist Page (Optional)](?lab=improving-watchlist-page) | 5 min | + +### **Let's Get Started!** + +- [Click here](?lab=signing-up) or select **Getting Started** from the menu on the left to start the workshop and set up an Oracle APEX workspace. +- If the menu is not displayed, you can open by clicking the menu button (![Menu icon](./images/menu-button.png)) at the top of the page. + +### Downloads + +- [Click here](./intro/files/movies-watchlist.sql) to download the completed application. + +## Learn More - *Useful Links* + +- [The Movie Database](https://www.themoviedb.org/) +- [The Movie Database API](https://developers.themoviedb.org/3/) +- [APEX on Autonomous](https://apex.oracle.com/autonomous) +- [APEX Service](https://apex.oracle.com/en/platform/apex-service/) +- [APEX Collateral](https://apex.oracle.com) +- [Tutorials](https://apex.oracle.com/en/learn/tutorials) +- [Community](https://apex.oracle.com/community) +- [External Site + Slack](http://apex.world) + +## Acknowledgements + +- **Author** - Paige Hanssen +- **Additional Contributors** - Kay Jasanya, Shakeeb Rahman, Steve Muench, Monica Godoy, Eli Feuerstein, Carlos Maciel, Dalia Vazquez +- **Last Updated By/Date** - Paige Hanssen, March 2022 \ No newline at end of file diff --git a/apex-231/movies-lab/intro/images/lab-header.png b/apex-231/movies-lab/intro/images/lab-header.png new file mode 100644 index 00000000..61781469 Binary files /dev/null and b/apex-231/movies-lab/intro/images/lab-header.png differ diff --git a/apex-231/movies-lab/intro/images/lab-menu.png b/apex-231/movies-lab/intro/images/lab-menu.png new file mode 100644 index 00000000..1674b9ef Binary files /dev/null and b/apex-231/movies-lab/intro/images/lab-menu.png differ diff --git a/apex-231/movies-lab/intro/images/menu-button.png b/apex-231/movies-lab/intro/images/menu-button.png new file mode 100644 index 00000000..1716bedb Binary files /dev/null and b/apex-231/movies-lab/intro/images/menu-button.png differ diff --git a/apex-231/movies-lab/intro/intro.md b/apex-231/movies-lab/intro/intro.md new file mode 100644 index 00000000..7400aeeb --- /dev/null +++ b/apex-231/movies-lab/intro/intro.md @@ -0,0 +1,60 @@ +# Introduction +## About this Workshop +In this workshop, you will create an application that allows you and your friends to search for movies and create personal watchlists. You will use [The Movie Database (TMDB)](https://www.themoviedb.org/), which is a database that contains a large amount of data about a vast number of movies and TV shows. TMDB has an extensive API that you will access in this workshop to get lists of popular movies, search for movies, and get details and cast lists for movies. + +When individual users log into the app, the home page will display their own unique watchlist. They can add movies to their watchlist from either a list of current popular movies or by searching for a specific movie of their choice. After adding movies to their list, users can use filters to browse through their list based on watched status, release decade, and runtime. + +While the end result is a simple version of a movies watchlist application, you can continue to build it out far past what this workshop takes you through, using many of the same concepts you will learn. The Movie Database API has a lot of options that you can use in your application, such as streaming providers for individual movies, videos related to movies, upcoming movies, and more. There are also a lot of features in Oracle APEX that you can use to allow users to rate movies they have watched, make comments on movies, and more. + +Estimated Workshop Time: 2 hours + +*Note: This lab assumes you are using Oracle APEX 23.1.* + +### Objectives +In this lab, you will: +- Obtain a free development environment. +- Learn how to create REST data sources. +- Learn how to create local tables. +- Learn how to use application items and processes. +- Learn how to create a page to view data from a REST source. +- Learn how to create a page to view data from a local table. + +### Labs + +| # | Module | Est. Time | +| --- | --- | --- | +| - | [Getting Started](?lab=1-sign-up-apex) | 5 min | +| 1 | [Create the Application](?lab=create-app) | 10 min | +| 2 | [Create REST Data Sources](?lab=creating-rest-sources) | 10 min | +| 3 | [Create the Search Page](?lab=creating-movie-search-page) | 20 min | +| 4 | [Create the Details Page](?lab=creating-movie-details-page) | 20 min | +| 5 | [Create Local Tables](?lab=creating-tables) | 10 min | +| 6 | [Implement Buttons and Badges](?lab=creating-buttons-badges) | 25 min | +| 7 | [Implement the Watchlist Page](?lab=implementing-watchlist-page) | 25 min | +| - | [Add Cast List (Optional)](?lab=adding-cast-list) | 5 min | +| - | [Improve the UI (Optional)](?lab=improving-watchlist-page) | 5 min | + +### **Let's Get Started!** + +- [Click here](?lab=1-sign-up-apex) or select **Getting Started** from the menu on the left to start the workshop and set up an Oracle APEX workspace. +- If the menu is not displayed, you can open by clicking the menu button (![Menu icon](./images/menu-button.png)) at the top of the page. + +### Downloads + +- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/movies-watchlist-231.sql) to download the completed application. + +## Learn More - *Useful Links* + +- [The Movie Database](https://www.themoviedb.org/) +- [The Movie Database API](https://developers.themoviedb.org/3/) +- [APEX on Autonomous](https://apex.oracle.com/autonomous) +- [APEX Service](https://apex.oracle.com/en/platform/apex-service/) +- [APEX Collateral](https://apex.oracle.com) +- [Tutorials](https://apex.oracle.com/en/learn/tutorials) +- [Community](https://apex.oracle.com/community) +- [External Site + Slack](http://apex.world) + +## Acknowledgements + +- **Author** - Paige Hanssen +- **Last Updated By/Date** - Paige Hanssen, May 2023 \ No newline at end of file diff --git a/apex-231/movies-lab/workshops/freetier/index.html b/apex-231/movies-lab/workshops/freetier/index.html new file mode 100644 index 00000000..aaac634b --- /dev/null +++ b/apex-231/movies-lab/workshops/freetier/index.html @@ -0,0 +1,62 @@ + + + + + + + + + Oracle LiveLabs + + + + + + + + + + + + +
+
+
+
+
+
+
+
+ + + + + diff --git a/apex-231/movies-lab/workshops/freetier/manifest.json b/apex-231/movies-lab/workshops/freetier/manifest.json new file mode 100644 index 00000000..1dd65830 --- /dev/null +++ b/apex-231/movies-lab/workshops/freetier/manifest.json @@ -0,0 +1,55 @@ +{ + "workshoptitle": "Build a Movies Watchlist Application", + "help": "livelabs-help-db_us@oracle.com", + "tutorials": [ + { + "title": "Introduction", + "filename": "../../intro/intro.md" + }, + { + "title": "Getting Started", + "filename": "../../../common-latest/1-sign-up-apex/1-sign-up-apex.md" + }, + { + "title": "Lab 1: Create the Application", + "filename": "../../1-create-app/create-app.md" + }, + { + "title": "Lab 2: Create REST Data Sources", + "filename": "../../2-creating-rest-sources/creating-rest-sources.md" + }, + { + "title": "Lab 3: Create the Search Page", + "filename": "../../3-creating-search-page/creating-movie-search-page.md" + }, + { + "title": "Lab 4: Create the Details Page", + "filename": "../../4-creating-details-page/creating-movie-details-page.md" + }, + { + "title": "Lab 5: Create Local Tables", + "filename": "../../5-creating-tables/creating-tables.md" + }, + { + "title": "Lab 6: Implement Buttons and Badges", + "filename": "../../6-creating-details-buttons/creating-buttons-badges.md" + }, + { + "title": "Lab 7: Implement the Watchlist Page", + "filename": "../../7-implementing-watchlist-page/implementing-watchlist-page.md" + }, + { + "title": "Optional Lab: Add Cast List", + "filename": "../../8-adding-cast-list/adding-cast-list.md" + }, + { + "title": "Optional Lab: Improve the UI", + "filename": "../../9-improving-app/improving-watchlist-page.md" + }, + { + "title": "Need Help?", + "description": "Solutions to Common Problems and Directions for Receiving Live Help", + "filename":"https://oracle-livelabs.github.io/common/labs/need-help/need-help-livelabs.md" + } + ] +} diff --git a/apex-231/movies-lab/workshops/ocw-freetier/index.html b/apex-231/movies-lab/workshops/ocw-freetier/index.html new file mode 100644 index 00000000..aaac634b --- /dev/null +++ b/apex-231/movies-lab/workshops/ocw-freetier/index.html @@ -0,0 +1,62 @@ + + + + + + + + + Oracle LiveLabs + + + + + + + + + + + + +
+
+
+
+
+
+
+
+ + + + + diff --git a/apex-231/movies-lab/workshops/ocw-freetier/manifest.json b/apex-231/movies-lab/workshops/ocw-freetier/manifest.json new file mode 100644 index 00000000..a24de7a4 --- /dev/null +++ b/apex-231/movies-lab/workshops/ocw-freetier/manifest.json @@ -0,0 +1,62 @@ +{ + "workshoptitle": "Build a Movies Watchlist Application", + "help": "livelabs-help-db_us@oracle.com", + "tutorials": [ + { + "title": "Introduction", + "filename": "../../intro/intro.md" + }, + { + "title": "Getting Started", + "filename": "../../../common-latest/1-sign-up-apex/1-sign-up-apex.md" + }, + { + "title": "Lab 1: Create the Application", + "filename": "../../1-create-app/create-app.md" + }, + { + "title": "Lab 2: Create REST Data Sources", + "filename": "../../2-creating-rest-sources/creating-rest-sources.md" + }, + { + "title": "Lab 3: Create the Search Page", + "filename": "../../3-creating-search-page/creating-movie-search-page.md" + }, + { + "title": "Lab 4: Create the Details Page", + "filename": "../../4-creating-details-page/creating-movie-details-page.md" + }, + { + "title": "Lab 5: Create Local Tables", + "filename": "../../5-creating-tables/creating-tables.md" + }, + { + "title": "Lab 6: Implement Buttons and Badges", + "filename": "../../6-creating-details-buttons/creating-buttons-badges.md" + }, + { + "title": "Lab 7: Implement the Watchlist Page", + "filename": "../../7-implementing-watchlist-page/implementing-watchlist-page.md" + }, + { + "title": "Optional Lab: Add Cast List", + "filename": "../../8-adding-cast-list/adding-cast-list.md" + }, + { + "title": "Optional Lab: Improve the UI", + "filename": "../../9-improving-app/improving-watchlist-page.md" + }, + { + "title": "Optional Lab: Terminate Autonomous Database", + "filename": "https://oracle-livelabs.github.io/common/labs/terminate-adb/terminate-adb.md" + }, + { + "title": "Optional Lab: Terminate APEX Service", + "filename": "../../../common-latest/terminate-apex-service/terminate-apex.md" + }, + { + "title": "Oracle CloudWorld 2022 - Get Help", + "filename": "https://oracle-livelabs.github.io/common/support/ocwsupportlab/ocwsupportlab.md" +} + ] +} diff --git a/apex-231/movies-lab/workshops/ocw-livelabs/index.html b/apex-231/movies-lab/workshops/ocw-livelabs/index.html new file mode 100644 index 00000000..aaac634b --- /dev/null +++ b/apex-231/movies-lab/workshops/ocw-livelabs/index.html @@ -0,0 +1,62 @@ + + + + + + + + + Oracle LiveLabs + + + + + + + + + + + + +
+
+
+
+
+
+
+
+ + + + + diff --git a/apex-231/movies-lab/workshops/ocw-livelabs/manifest.json b/apex-231/movies-lab/workshops/ocw-livelabs/manifest.json new file mode 100644 index 00000000..a24de7a4 --- /dev/null +++ b/apex-231/movies-lab/workshops/ocw-livelabs/manifest.json @@ -0,0 +1,62 @@ +{ + "workshoptitle": "Build a Movies Watchlist Application", + "help": "livelabs-help-db_us@oracle.com", + "tutorials": [ + { + "title": "Introduction", + "filename": "../../intro/intro.md" + }, + { + "title": "Getting Started", + "filename": "../../../common-latest/1-sign-up-apex/1-sign-up-apex.md" + }, + { + "title": "Lab 1: Create the Application", + "filename": "../../1-create-app/create-app.md" + }, + { + "title": "Lab 2: Create REST Data Sources", + "filename": "../../2-creating-rest-sources/creating-rest-sources.md" + }, + { + "title": "Lab 3: Create the Search Page", + "filename": "../../3-creating-search-page/creating-movie-search-page.md" + }, + { + "title": "Lab 4: Create the Details Page", + "filename": "../../4-creating-details-page/creating-movie-details-page.md" + }, + { + "title": "Lab 5: Create Local Tables", + "filename": "../../5-creating-tables/creating-tables.md" + }, + { + "title": "Lab 6: Implement Buttons and Badges", + "filename": "../../6-creating-details-buttons/creating-buttons-badges.md" + }, + { + "title": "Lab 7: Implement the Watchlist Page", + "filename": "../../7-implementing-watchlist-page/implementing-watchlist-page.md" + }, + { + "title": "Optional Lab: Add Cast List", + "filename": "../../8-adding-cast-list/adding-cast-list.md" + }, + { + "title": "Optional Lab: Improve the UI", + "filename": "../../9-improving-app/improving-watchlist-page.md" + }, + { + "title": "Optional Lab: Terminate Autonomous Database", + "filename": "https://oracle-livelabs.github.io/common/labs/terminate-adb/terminate-adb.md" + }, + { + "title": "Optional Lab: Terminate APEX Service", + "filename": "../../../common-latest/terminate-apex-service/terminate-apex.md" + }, + { + "title": "Oracle CloudWorld 2022 - Get Help", + "filename": "https://oracle-livelabs.github.io/common/support/ocwsupportlab/ocwsupportlab.md" +} + ] +} diff --git a/apex-231/movies-lab/workshops/ocw23-freetier/index.html b/apex-231/movies-lab/workshops/ocw23-freetier/index.html new file mode 100644 index 00000000..aaac634b --- /dev/null +++ b/apex-231/movies-lab/workshops/ocw23-freetier/index.html @@ -0,0 +1,62 @@ + + + + + + + + + Oracle LiveLabs + + + + + + + + + + + + +
+
+
+
+
+
+
+
+ + + + + diff --git a/apex-231/movies-lab/workshops/ocw23-freetier/manifest.json b/apex-231/movies-lab/workshops/ocw23-freetier/manifest.json new file mode 100644 index 00000000..d96422f0 --- /dev/null +++ b/apex-231/movies-lab/workshops/ocw23-freetier/manifest.json @@ -0,0 +1,47 @@ +{ + "workshoptitle": "Build a Movies Watchlist Application", + "help": "livelabs-help-db_us@oracle.com", + "tutorials": [ + { + "title": "Introduction", + "filename": "../../intro/intro.md" + }, + { + "title": "Getting Started", + "filename": "../../../common-latest/1-sign-up-apex/1-sign-up-apex.md" + }, + { + "title": "Lab 1: Create the Application", + "filename": "../../1-create-app/create-app.md" + }, + { + "title": "Lab 2: Create REST Data Sources", + "filename": "../../2-creating-rest-sources/creating-rest-sources.md" + }, + { + "title": "Lab 3: Create the Search Page", + "filename": "../../3-creating-search-page/creating-movie-search-page.md" + }, + { + "title": "Lab 4: Create the Details Page", + "filename": "../../4-creating-details-page/creating-movie-details-page.md" + }, + { + "title": "Lab 5: Create Local Tables", + "filename": "../../5-creating-tables/creating-tables.md" + }, + { + "title": "Lab 6: Implement Buttons and Badges", + "filename": "../../6-creating-details-buttons/creating-buttons-badges.md" + }, + { + "title": "Lab 7: Implement the Watchlist Page", + "filename": "../../7-implementing-watchlist-page/implementing-watchlist-page.md" + }, + { + "title": "Need Help?", + "description": "Solutions to Common Problems and Directions for Receiving Live Help", + "filename":"https://oracle-livelabs.github.io/common/labs/need-help/need-help-livelabs.md" + } + ] +} diff --git a/apex-231/movies-lab/workshops/ocw23-livelabs/index.html b/apex-231/movies-lab/workshops/ocw23-livelabs/index.html new file mode 100644 index 00000000..aaac634b --- /dev/null +++ b/apex-231/movies-lab/workshops/ocw23-livelabs/index.html @@ -0,0 +1,62 @@ + + + + + + + + + Oracle LiveLabs + + + + + + + + + + + + +
+
+
+
+
+
+
+
+ + + + + diff --git a/apex-231/movies-lab/workshops/ocw23-livelabs/manifest.json b/apex-231/movies-lab/workshops/ocw23-livelabs/manifest.json new file mode 100644 index 00000000..69a6774c --- /dev/null +++ b/apex-231/movies-lab/workshops/ocw23-livelabs/manifest.json @@ -0,0 +1,52 @@ +{ + "workshoptitle": "Build a Movies Watchlist Application", + "help": "livelabs-help-db_us@oracle.com", + "tutorials": [ + { + "title": "Get Started", + "description": "Prerequisites for LiveLabs (Oracle-owned tenancies). The title of the lab and the Contents Menu title (the title above) match for Prerequisite lab. This lab is always first.", + "filename": "https://oracle-livelabs.github.io/common/labs/cloud-login/cloud-login-livelabs2.md" + }, + { + "title": "Introduction", + "filename": "../../intro/intro.md" + }, + { + "title": "Sign Up for an APEX Workspace", + "filename": "../../../common-latest/1-sign-up-apex/create-adb-livelabs.md" + }, + { + "title": "Lab 1: Create the Application", + "filename": "../../1-create-app/create-app.md" + }, + { + "title": "Lab 2: Create REST Data Sources", + "filename": "../../2-creating-rest-sources/creating-rest-sources.md" + }, + { + "title": "Lab 3: Create the Search Page", + "filename": "../../3-creating-search-page/creating-movie-search-page.md" + }, + { + "title": "Lab 4: Create the Details Page", + "filename": "../../4-creating-details-page/creating-movie-details-page.md" + }, + { + "title": "Lab 5: Create Local Tables", + "filename": "../../5-creating-tables/creating-tables.md" + }, + { + "title": "Lab 6: Implement Buttons and Badges", + "filename": "../../6-creating-details-buttons/creating-buttons-badges.md" + }, + { + "title": "Lab 7: Implement the Watchlist Page", + "filename": "../../7-implementing-watchlist-page/implementing-watchlist-page.md" + }, + { + "title": "Need Help?", + "description": "Solutions to Common Problems and Directions for Receiving Live Help", + "filename":"https://oracle-livelabs.github.io/common/labs/need-help/need-help-livelabs.md" + } + ] +} diff --git a/movies-lab/1-create-app/create-app.md b/movies-lab/1-create-app/create-app.md index 0427ec69..e4ddc14e 100644 --- a/movies-lab/1-create-app/create-app.md +++ b/movies-lab/1-create-app/create-app.md @@ -35,9 +35,9 @@ In this lab, you will: ![App Builder page with highlighted Create button](images/app-builder-create.png " ") -4. Click **New Application**. +4. Select the **Use Create App Wizard** option. - ![Create an Application page with highlighted New Application button](images/new-application-edit.png " ") + ![Create an Application page with the Use Create App Wizard list item highlighted](images/new-application-edit.png " ") 5. In the Create an Application wizard, set Name to **Movies Watchlist**. @@ -132,7 +132,7 @@ You now know how to create, run, and update the theme of an application. You may ## Learn More -- [App Builder Concepts](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/application-builder-concepts.html) +- [App Builder Concepts](https://docs.oracle.com/en/database/oracle/apex/23.2/htmdb/application-builder-concepts.html) - [Universal Theme](https://apex.oracle.com/pls/apex/apex_pm/r/ut/getting-started) @@ -143,11 +143,11 @@ You now know how to create, run, and update the theme of an application. You may ## Stuck? Download the Application Here Stuck on a step or struggling with the lab? You can download a copy of the Movies Watchlist application through Lab 1 and follow the instructions below to import it into your Oracle APEX workspace. -- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-1-231.sql) to download a copy of the app at the end of Lab 1. +- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-1-232.sql) to download a copy of the app at the end of Lab 1. - You can import the app to your APEX workspace by clicking **Import** in the App Builder home page and following the wizard steps. ## Acknowledgements - **Author** - Paige Hanssen -- **Last Updated By/Date** - Paige Hanssen, May 2023 +- **Last Updated By/Date** - Paige Hanssen, November 2023 diff --git a/movies-lab/1-create-app/images/new-application-edit.png b/movies-lab/1-create-app/images/new-application-edit.png index e892983d..0a3f081c 100644 Binary files a/movies-lab/1-create-app/images/new-application-edit.png and b/movies-lab/1-create-app/images/new-application-edit.png differ diff --git a/movies-lab/1-create-app/images/run-app.png b/movies-lab/1-create-app/images/run-app.png index 49121e98..393ba977 100644 Binary files a/movies-lab/1-create-app/images/run-app.png and b/movies-lab/1-create-app/images/run-app.png differ diff --git a/movies-lab/2-creating-rest-sources/creating-rest-sources.md b/movies-lab/2-creating-rest-sources/creating-rest-sources.md index 544a9ebd..b13d33b3 100644 --- a/movies-lab/2-creating-rest-sources/creating-rest-sources.md +++ b/movies-lab/2-creating-rest-sources/creating-rest-sources.md @@ -129,14 +129,14 @@ You now know how to create REST data sources from a REST Catalog in Oracle APEX ## Learn More -- [REST Data Sources Documentation](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/managing-REST-data-sources.html) +- [REST Data Sources Documentation](https://docs.oracle.com/en/database/oracle/apex/23.2/htmdb/managing-REST-data-sources.html) - [REST Data Sources Video](https://www.youtube.com/watch?v=ctCwvD1qavs) ## Stuck? Download the Application Here Stuck on a step or struggling with the lab? You can download a copy of the Movies Watchlist application through Lab 2 and follow the instructions below to import it into your Oracle APEX workspace. -- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-2-231.sql) to download a copy of the app at the end of Lab 2. +- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-2-232.sql) to download a copy of the app at the end of Lab 2. - You can import the app to your APEX workspace by clicking **Import** in the App Builder home page and following the wizard steps. @@ -163,4 +163,4 @@ Stuck on a step or struggling with the lab? You can download a copy of the Movie ## Acknowledgements - **Author** - Paige Hanssen -- **Last Updated By/Date** - Paige Hanssen, May 2023 \ No newline at end of file +- **Last Updated By/Date** - Paige Hanssen, November 2023 \ No newline at end of file diff --git a/movies-lab/2-creating-rest-sources/images/app-builder-menu.png b/movies-lab/2-creating-rest-sources/images/app-builder-menu.png index 74a18f54..7dfd0296 100644 Binary files a/movies-lab/2-creating-rest-sources/images/app-builder-menu.png and b/movies-lab/2-creating-rest-sources/images/app-builder-menu.png differ diff --git a/movies-lab/2-creating-rest-sources/images/create-rds.png b/movies-lab/2-creating-rest-sources/images/create-rds.png index 6685c839..65c57a27 100644 Binary files a/movies-lab/2-creating-rest-sources/images/create-rds.png and b/movies-lab/2-creating-rest-sources/images/create-rds.png differ diff --git a/movies-lab/2-creating-rest-sources/images/export-import.png b/movies-lab/2-creating-rest-sources/images/export-import.png index 3724f820..631faa43 100644 Binary files a/movies-lab/2-creating-rest-sources/images/export-import.png and b/movies-lab/2-creating-rest-sources/images/export-import.png differ diff --git a/movies-lab/2-creating-rest-sources/images/import-catalog.png b/movies-lab/2-creating-rest-sources/images/import-catalog.png index 5207a482..65e9f338 100644 Binary files a/movies-lab/2-creating-rest-sources/images/import-catalog.png and b/movies-lab/2-creating-rest-sources/images/import-catalog.png differ diff --git a/movies-lab/2-creating-rest-sources/images/import.png b/movies-lab/2-creating-rest-sources/images/import.png index bbe096e4..64f6dbab 100644 Binary files a/movies-lab/2-creating-rest-sources/images/import.png and b/movies-lab/2-creating-rest-sources/images/import.png differ diff --git a/movies-lab/2-creating-rest-sources/images/sc-rest-sources.png b/movies-lab/2-creating-rest-sources/images/sc-rest-sources.png index c900dbb7..16fa1183 100644 Binary files a/movies-lab/2-creating-rest-sources/images/sc-rest-sources.png and b/movies-lab/2-creating-rest-sources/images/sc-rest-sources.png differ diff --git a/movies-lab/2-creating-rest-sources/images/shared-components.png b/movies-lab/2-creating-rest-sources/images/shared-components.png index 7a805d6e..4ece0cfc 100644 Binary files a/movies-lab/2-creating-rest-sources/images/shared-components.png and b/movies-lab/2-creating-rest-sources/images/shared-components.png differ diff --git a/movies-lab/3-creating-search-page/creating-movie-search-page.md b/movies-lab/3-creating-search-page/creating-movie-search-page.md index 7aa1eaa2..8cf49ca8 100644 --- a/movies-lab/3-creating-search-page/creating-movie-search-page.md +++ b/movies-lab/3-creating-search-page/creating-movie-search-page.md @@ -92,6 +92,8 @@ To start, you will create the Movie Search page and do a little page setup befor * The above code styles the movie poster images to all be the same size. It also adds some styling for the Cards region badge attribute that will be used in a later lab, to place it in the top right of a card. Finally, it adds some styling for the movie rating that you will display on the Card along with the movie title and poster. +8. Click the **Save** button to save your changes. + ![Page 2 open in Page Designer with the properties in the property editor updated to reflect the values from steps 6 and 7](images/page-properties.png " ") ## Task 2: Set up Popular and Searched Movies @@ -296,7 +298,7 @@ The last task in this lab is linking the Movie Search page to the My Watchlist p * Identification → Action: **Submit Page** -9. Click the green Save and Run button at the top right of the Page Designer. +9. Click the **Save and Run** button at the top right of the Page Designer. ![Page 1 open in Page Designer editing the Dynamic Action action associated with Refresh on Dialog Closed](images/da-action.png " ") @@ -324,24 +326,24 @@ You now know how to create a page in your APEX application and add components to ## Learn More -- [Page Designer Documentation](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/about-page-designer.html) +- [Page Designer Documentation](https://docs.oracle.com/en/database/oracle/apex/23.2/htmdb/about-page-designer.html) -- [Cards Documentation](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/managing-cards.html) +- [Cards Documentation](https://docs.oracle.com/en/database/oracle/apex/23.2/htmdb/managing-cards.html) - [Cards in Universal Theme](https://apex.oracle.com/pls/apex/r/apex_pm/ut/card-regions) -- [Modal Dialog Pages](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/creating-dialog-pages.html) +- [Modal Dialog Pages](https://docs.oracle.com/en/database/oracle/apex/23.2/htmdb/creating-dialog-pages.html) - [Variables in APEX](https://www.talkapex.com/2011/01/variables-in-apex/) - [Intro to Dynamic Actions Video](https://www.youtube.com/watch?v=hpcYevCC-Ow) -- [Dynamic Actions Documentation](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/managing-dynamic-actions.html) +- [Dynamic Actions Documentation](https://docs.oracle.com/en/database/oracle/apex/23.2/htmdb/managing-dynamic-actions.html) ## Stuck? Download the Application Here Stuck on a step or struggling with the lab? You can download a copy of the Movies Watchlist application through Lab 3 and follow the instructions below to import it into your Oracle APEX workspace. -- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-3-231.sql) to download a copy of the app at the end of Lab 3. +- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-3-232.sql) to download a copy of the app at the end of Lab 3. - You can import the app to your APEX workspace by clicking **Import** in the App Builder home page and following the wizard steps. @@ -369,4 +371,4 @@ Stuck on a step or struggling with the lab? You can download a copy of the Movie ## Acknowledgements - **Author** - Paige Hanssen -- **Last Updated By/Date** - Paige Hanssen, May 2023 \ No newline at end of file +- **Last Updated By/Date** - Paige Hanssen, November 2023 \ No newline at end of file diff --git a/movies-lab/3-creating-search-page/images/button-properties.png b/movies-lab/3-creating-search-page/images/button-properties.png index aa012145..610cf715 100644 Binary files a/movies-lab/3-creating-search-page/images/button-properties.png and b/movies-lab/3-creating-search-page/images/button-properties.png differ diff --git a/movies-lab/3-creating-search-page/images/create-button.png b/movies-lab/3-creating-search-page/images/create-button.png index 4f5e831b..77ff2bd5 100644 Binary files a/movies-lab/3-creating-search-page/images/create-button.png and b/movies-lab/3-creating-search-page/images/create-button.png differ diff --git a/movies-lab/3-creating-search-page/images/create-page-item.png b/movies-lab/3-creating-search-page/images/create-page-item.png index 2ad48407..90a65b45 100644 Binary files a/movies-lab/3-creating-search-page/images/create-page-item.png and b/movies-lab/3-creating-search-page/images/create-page-item.png differ diff --git a/movies-lab/3-creating-search-page/images/create-region.png b/movies-lab/3-creating-search-page/images/create-region.png index 67d96eb3..37450c64 100644 Binary files a/movies-lab/3-creating-search-page/images/create-region.png and b/movies-lab/3-creating-search-page/images/create-region.png differ diff --git a/movies-lab/3-creating-search-page/images/create-search-page.png b/movies-lab/3-creating-search-page/images/create-search-page.png index 33c5dfc3..56fec6f1 100644 Binary files a/movies-lab/3-creating-search-page/images/create-search-page.png and b/movies-lab/3-creating-search-page/images/create-search-page.png differ diff --git a/movies-lab/3-creating-search-page/images/da-action.png b/movies-lab/3-creating-search-page/images/da-action.png index a580515b..ec594e69 100644 Binary files a/movies-lab/3-creating-search-page/images/da-action.png and b/movies-lab/3-creating-search-page/images/da-action.png differ diff --git a/movies-lab/3-creating-search-page/images/da-event.png b/movies-lab/3-creating-search-page/images/da-event.png index 307323a0..92047902 100644 Binary files a/movies-lab/3-creating-search-page/images/da-event.png and b/movies-lab/3-creating-search-page/images/da-event.png differ diff --git a/movies-lab/3-creating-search-page/images/page-navigation.png b/movies-lab/3-creating-search-page/images/page-navigation.png index 4869fb3d..98faa8b9 100644 Binary files a/movies-lab/3-creating-search-page/images/page-navigation.png and b/movies-lab/3-creating-search-page/images/page-navigation.png differ diff --git a/movies-lab/3-creating-search-page/images/page-properties.png b/movies-lab/3-creating-search-page/images/page-properties.png index 2e410be5..a52049d3 100644 Binary files a/movies-lab/3-creating-search-page/images/page-properties.png and b/movies-lab/3-creating-search-page/images/page-properties.png differ diff --git a/movies-lab/3-creating-search-page/images/page-template-options.png b/movies-lab/3-creating-search-page/images/page-template-options.png index b2a53c62..3c3a71f9 100644 Binary files a/movies-lab/3-creating-search-page/images/page-template-options.png and b/movies-lab/3-creating-search-page/images/page-template-options.png differ diff --git a/movies-lab/3-creating-search-page/images/pop-region-attributes-1.png b/movies-lab/3-creating-search-page/images/pop-region-attributes-1.png index b6aed054..55b9fb2f 100644 Binary files a/movies-lab/3-creating-search-page/images/pop-region-attributes-1.png and b/movies-lab/3-creating-search-page/images/pop-region-attributes-1.png differ diff --git a/movies-lab/3-creating-search-page/images/pop-region-attributes-2.png b/movies-lab/3-creating-search-page/images/pop-region-attributes-2.png index 52a00f9d..5be9ce17 100644 Binary files a/movies-lab/3-creating-search-page/images/pop-region-attributes-2.png and b/movies-lab/3-creating-search-page/images/pop-region-attributes-2.png differ diff --git a/movies-lab/3-creating-search-page/images/popular-region-properties.png b/movies-lab/3-creating-search-page/images/popular-region-properties.png index dd770638..2a6c54a0 100644 Binary files a/movies-lab/3-creating-search-page/images/popular-region-properties.png and b/movies-lab/3-creating-search-page/images/popular-region-properties.png differ diff --git a/movies-lab/3-creating-search-page/images/search-bar.png b/movies-lab/3-creating-search-page/images/search-bar.png index adfd88fc..37731e85 100644 Binary files a/movies-lab/3-creating-search-page/images/search-bar.png and b/movies-lab/3-creating-search-page/images/search-bar.png differ diff --git a/movies-lab/3-creating-search-page/images/search-item.png b/movies-lab/3-creating-search-page/images/search-item.png index 0f8ec33a..bd865ec0 100644 Binary files a/movies-lab/3-creating-search-page/images/search-item.png and b/movies-lab/3-creating-search-page/images/search-item.png differ diff --git a/movies-lab/3-creating-search-page/images/searched-query.png b/movies-lab/3-creating-search-page/images/searched-query.png index 022703a2..67b7ee80 100644 Binary files a/movies-lab/3-creating-search-page/images/searched-query.png and b/movies-lab/3-creating-search-page/images/searched-query.png differ diff --git a/movies-lab/4-creating-details-page/creating-movie-details-page.md b/movies-lab/4-creating-details-page/creating-movie-details-page.md index c25c8c78..ee504bc8 100644 --- a/movies-lab/4-creating-details-page/creating-movie-details-page.md +++ b/movies-lab/4-creating-details-page/creating-movie-details-page.md @@ -265,14 +265,14 @@ You have now set up the Movie Details page and set it up to open for any card th ## Learn More -- [Modal Dialog Pages](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/creating-dialog-pages.html) +- [Modal Dialog Pages](https://docs.oracle.com/en/database/oracle/apex/23.2/htmdb/creating-dialog-pages.html) - [Variables in APEX](https://www.talkapex.com/2011/01/variables-in-apex/) ## Stuck? Download the Application Here Stuck on a step or struggling with the lab? You can download a copy of the Movies Watchlist application through Lab 4 and follow the instructions below to import it into your Oracle APEX workspace. -- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-4-231.sql) to download a copy of the app at the end of Lab 4. +- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-4-232.sql) to download a copy of the app at the end of Lab 4. - You can import the app to your APEX workspace by clicking **Import** in the App Builder home page and following the wizard steps. @@ -300,4 +300,4 @@ Stuck on a step or struggling with the lab? You can download a copy of the Movie ## Acknowledgements - **Author** - Paige Hanssen -- **Last Updated By/Date** - Paige Hanssen, May 2023 \ No newline at end of file +- **Last Updated By/Date** - Paige Hanssen, November 2023 \ No newline at end of file diff --git a/movies-lab/4-creating-details-page/images/card-action.png b/movies-lab/4-creating-details-page/images/card-action.png index 7d074820..06c761d5 100644 Binary files a/movies-lab/4-creating-details-page/images/card-action.png and b/movies-lab/4-creating-details-page/images/card-action.png differ diff --git a/movies-lab/4-creating-details-page/images/details-page-css.png b/movies-lab/4-creating-details-page/images/details-page-css.png index dcd0413c..1e71023f 100644 Binary files a/movies-lab/4-creating-details-page/images/details-page-css.png and b/movies-lab/4-creating-details-page/images/details-page-css.png differ diff --git a/movies-lab/4-creating-details-page/images/header-media.png b/movies-lab/4-creating-details-page/images/header-media.png index 792eedb2..d6113d4c 100644 Binary files a/movies-lab/4-creating-details-page/images/header-media.png and b/movies-lab/4-creating-details-page/images/header-media.png differ diff --git a/movies-lab/4-creating-details-page/images/header-region-attributes.png b/movies-lab/4-creating-details-page/images/header-region-attributes.png index ce246ee0..b2012fa2 100644 Binary files a/movies-lab/4-creating-details-page/images/header-region-attributes.png and b/movies-lab/4-creating-details-page/images/header-region-attributes.png differ diff --git a/movies-lab/4-creating-details-page/images/hide-items.png b/movies-lab/4-creating-details-page/images/hide-items.png index 42c65734..1029e897 100644 Binary files a/movies-lab/4-creating-details-page/images/hide-items.png and b/movies-lab/4-creating-details-page/images/hide-items.png differ diff --git a/movies-lab/4-creating-details-page/images/movie-id-parameter.png b/movies-lab/4-creating-details-page/images/movie-id-parameter.png index 0ea9b42b..d34024df 100644 Binary files a/movies-lab/4-creating-details-page/images/movie-id-parameter.png and b/movies-lab/4-creating-details-page/images/movie-id-parameter.png differ diff --git a/movies-lab/4-creating-details-page/images/overview.png b/movies-lab/4-creating-details-page/images/overview.png index d02addea..6f83959f 100644 Binary files a/movies-lab/4-creating-details-page/images/overview.png and b/movies-lab/4-creating-details-page/images/overview.png differ diff --git a/movies-lab/5-creating-tables/creating-tables.md b/movies-lab/5-creating-tables/creating-tables.md index 3ea85225..5471e8b8 100644 --- a/movies-lab/5-creating-tables/creating-tables.md +++ b/movies-lab/5-creating-tables/creating-tables.md @@ -32,11 +32,9 @@ The first table you need to create is the movie\_users table. It is very simple, username /unique ``` -3. Click the **Generate SQL** button at the top of the pane. - ![Quick SQL page with copied movie_users code in the left pane and generated code in the right pane](images/generate-users-sql.png " ") -4. Click **Settings** on the top right of the Quick SQL toolbar. +3. Click **Settings** on the top right of the Quick SQL toolbar. * Scroll down to Additional Columns and check **Audit columns**. @@ -46,23 +44,19 @@ The first table you need to create is the movie\_users table. It is very simple, ![Quick SQL Settings dialog open to the Audit Columns region overlaying the Quick SQL page](images/users-settings.png " ") -5. Click **Save SQL Script**. - -6. Script Name: **Create movie users** - -7. Click **Save Script**. +4. Click the **Review and Run** button. - ![Save Script dialog open over the Quick SQL page](images/users-save-script.png " ") + ![Quick SQL page with Review and Run button highlighted](images/users-run.png " ") -8. Click the **Review and Run** button. +5. Enter **Create movie users** as the name for the script and select **Run**. -9. Click **Run**, then **Run Now**. + ![Script Editor page with Create movie users set as the Script Name field value and the Run button highlighted](images/users-run-script.png " ") - * You should see a success page with 2 statements successfully processed. +6. Click **Run Now**. You should see a success page with 2 statements successfully processed. ![SQL Scripts Results page showing 2 statements processed, 2 successful, and 0 errors](images/users-success.png " ") -10. Now you will add an Application Item and Application Process, which will capture a user's email when they log in and assign them an ID so that you can keep track of their unique watchlist. +7. Now you will add an Application Item and Application Process, which will capture a user's email when they log in and assign them an ID so that you can keep track of their unique watchlist. ## Task 2: Create the Application Item and Process To store data within the movie\_users database, you will use an application process. The process checks a user's email when they log in and if they are a new user, it adds them to a local table, assigning them an ID. The ID of the current user is also stored in an application item, which will be used when a user adds, removes, or updates movies in their watchlist. @@ -165,53 +159,41 @@ You will need a table to store some basic movie information in addition to the u release_date runtime num vote_average num - /unique movie_id, user_id + movie_id, user_id /unique ``` * Note the /unique directive in the last line of the Quick SQL code. In the movie\_users table, you created a unique key by using the /unique directive for the username column. This prevents the same user from getting put into the table more than once by making sure the username is always unique. In the watchlist table, the unique key actually comes from two different columns: movie\_id and user\_id. A single user cannot add the same movie to the watchlist table more than once. Unique keys are extremely helpful when it comes to maintaining the integrity of the data in your local tables. -3. Click the **Generate SQL** button at the top of the pane. - - ![Quick SQL page with copied watchlist code in the left pane and generated code in the right pane](images/generate-watchlist.png " ") - -4. Just like you did for the movie\_users table, click Settings and select **Audit columns**. +3. Just like you did for the movie\_users table, click Settings and select **Audit columns**. -5. Click **Save Changes**. +4. Click **Save Changes**. ![Quick SQL Settings dialog open to the Audit Columns region overlaying the Quick SQL page](images/watchlist-settings.png " ") -6. Click **Save SQL Script**. +5. Click **Review and Run**. - * Set Name: **Create watchlist** +6. Enter **Create watchlist** as the name for the script and select **Run**. - * Click **Save Script**. + ![Script Editor page with Create watchlist set as the Script Name field value and the Run button highlighted](images/users-run-script.png " ") - ![Save Script dialog open over the Quick SQL page](images/watchlist-save-script.png " ") - -7. Click **Review and Run**. - -8. Click **Run**. - -9. Click **Run Now**. You should see 3 statements executed successfully. +7. Click **Run Now**. You should see 3 statements executed successfully. ![SQL Scripts Results page showing 4 statements processed, 4 successful, and 0 errors](images/watchlist-success.png " ") -10. The watchlist table has now been created. When a user clicks the Add to Watchlist button in the Movie Details dialog, the SQL action will capture the movie and user data and store it in this table so that you can access it later to build out our Watchlist on the front end. - -11. Now you will set up your Back, Add, Remove, and Mark Watched buttons. +8. The watchlist table has now been created. When a user clicks the Add to Watchlist button in the Movie Details dialog, the SQL action will capture the movie and user data and store it in this table so that you can access it later to build out our Watchlist on the front end. -You now know how to use Quick SQL to define new tables, and create application items and processes to store information and at specific points in your app. You may now **proceed to the next lab**. +You now know how to use Quick SQL to define new tables, and create application items and processes to store information and at specific points in your app. Next you will set up your Back, Add, Remove, and Mark Watched buttons. You may now **proceed to the next lab**. ## Learn More - [Tour of SQL Workshop](https://www.youtube.com/watch?v=bdglHoq-Hbs) -- [Quick SQL Documentation](https://docs.oracle.com/en/database/oracle/apex/22.2/aeutl/using-quick-sql.html) +- [Quick SQL Documentation](https://docs.oracle.com/en/database/oracle/apex/23.2/aeutl/using-quick-sql.html) ## Stuck? Download the Application Here Stuck on a step or struggling with the lab? You can download a copy of the Movies Watchlist application through Lab 5 and follow the instructions below to import it into your Oracle APEX workspace. -- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-5-231.sql) to download a copy of the app at the end of Lab 5. +- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-5-232.sql) to download a copy of the app at the end of Lab 5. - You can import the app to your APEX workspace by clicking **Import** in the App Builder home page and following the wizard steps. @@ -239,4 +221,4 @@ Stuck on a step or struggling with the lab? You can download a copy of the Movie ## Acknowledgements - **Author** - Paige Hanssen -- **Last Updated By/Date** - Paige Hanssen, May 2023 \ No newline at end of file +- **Last Updated By/Date** - Paige Hanssen, November 2023 \ No newline at end of file diff --git a/movies-lab/5-creating-tables/images/app-items.png b/movies-lab/5-creating-tables/images/app-items.png index 9a46a191..3cd089e7 100644 Binary files a/movies-lab/5-creating-tables/images/app-items.png and b/movies-lab/5-creating-tables/images/app-items.png differ diff --git a/movies-lab/5-creating-tables/images/app-processes.png b/movies-lab/5-creating-tables/images/app-processes.png index dea3165c..d42fb8c0 100644 Binary files a/movies-lab/5-creating-tables/images/app-processes.png and b/movies-lab/5-creating-tables/images/app-processes.png differ diff --git a/movies-lab/5-creating-tables/images/create-item.png b/movies-lab/5-creating-tables/images/create-item.png index 48626f83..9f1d64e3 100644 Binary files a/movies-lab/5-creating-tables/images/create-item.png and b/movies-lab/5-creating-tables/images/create-item.png differ diff --git a/movies-lab/5-creating-tables/images/create-process.png b/movies-lab/5-creating-tables/images/create-process.png index 52de080b..3790b6f5 100644 Binary files a/movies-lab/5-creating-tables/images/create-process.png and b/movies-lab/5-creating-tables/images/create-process.png differ diff --git a/movies-lab/5-creating-tables/images/generate-users-sql.png b/movies-lab/5-creating-tables/images/generate-users-sql.png index bb68b958..03c2ba82 100644 Binary files a/movies-lab/5-creating-tables/images/generate-users-sql.png and b/movies-lab/5-creating-tables/images/generate-users-sql.png differ diff --git a/movies-lab/5-creating-tables/images/quick-sql.png b/movies-lab/5-creating-tables/images/quick-sql.png index 359d066a..8643bcc4 100644 Binary files a/movies-lab/5-creating-tables/images/quick-sql.png and b/movies-lab/5-creating-tables/images/quick-sql.png differ diff --git a/movies-lab/5-creating-tables/images/users-run-script.png b/movies-lab/5-creating-tables/images/users-run-script.png new file mode 100644 index 00000000..bf2efadb Binary files /dev/null and b/movies-lab/5-creating-tables/images/users-run-script.png differ diff --git a/movies-lab/5-creating-tables/images/users-run.png b/movies-lab/5-creating-tables/images/users-run.png new file mode 100644 index 00000000..91ce7369 Binary files /dev/null and b/movies-lab/5-creating-tables/images/users-run.png differ diff --git a/movies-lab/5-creating-tables/images/users-settings.png b/movies-lab/5-creating-tables/images/users-settings.png index ff2c5c74..c68864e8 100644 Binary files a/movies-lab/5-creating-tables/images/users-settings.png and b/movies-lab/5-creating-tables/images/users-settings.png differ diff --git a/movies-lab/5-creating-tables/images/watchlist-run-script.png b/movies-lab/5-creating-tables/images/watchlist-run-script.png new file mode 100644 index 00000000..07a905f4 Binary files /dev/null and b/movies-lab/5-creating-tables/images/watchlist-run-script.png differ diff --git a/movies-lab/5-creating-tables/images/watchlist-settings.png b/movies-lab/5-creating-tables/images/watchlist-settings.png index f24ee25f..6c548d2d 100644 Binary files a/movies-lab/5-creating-tables/images/watchlist-settings.png and b/movies-lab/5-creating-tables/images/watchlist-settings.png differ diff --git a/movies-lab/6-creating-details-buttons/creating-buttons-badges.md b/movies-lab/6-creating-details-buttons/creating-buttons-badges.md index 3571bef6..f2d8964d 100644 --- a/movies-lab/6-creating-details-buttons/creating-buttons-badges.md +++ b/movies-lab/6-creating-details-buttons/creating-buttons-badges.md @@ -390,16 +390,16 @@ You now know how to use SQL commands in Page Designer regions and processes to g ## Learn More -- [Buttons Documentation](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/creating-buttons.html) +- [Buttons Documentation](https://docs.oracle.com/en/database/oracle/apex/23.2/htmdb/creating-buttons.html) -- [Understanding Page Processes](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/understanding-page-processes.html) +- [Understanding Page Processes](https://docs.oracle.com/en/database/oracle/apex/23.2/htmdb/understanding-page-processes.html) -- [Controlling Navigation Using Branches](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/controlling-navigation-using-branches.html) +- [Controlling Navigation Using Branches](https://docs.oracle.com/en/database/oracle/apex/23.2/htmdb/controlling-navigation-using-branches.html) ## Stuck? Download the Application Here Stuck on a step or struggling with the lab? You can download a copy of the Movies Watchlist application through Lab 6 and follow the instructions below to import it into your Oracle APEX workspace. -- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-6-231.sql) to download a copy of the app at the end of Lab 6. +- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-6-232.sql) to download a copy of the app at the end of Lab 6. - You can import the app to your APEX workspace by clicking **Import** in the App Builder home page and following the wizard steps. @@ -427,4 +427,4 @@ Stuck on a step or struggling with the lab? You can download a copy of the Movie ## Acknowledgements - **Author** - Paige Hanssen -- **Last Updated By/Date** - Paige Hanssen, May 2023 \ No newline at end of file +- **Last Updated By/Date** - Paige Hanssen, November 2023 \ No newline at end of file diff --git a/movies-lab/6-creating-details-buttons/images/add-behavior.png b/movies-lab/6-creating-details-buttons/images/add-behavior.png index 72232dbe..95fb6885 100644 Binary files a/movies-lab/6-creating-details-buttons/images/add-behavior.png and b/movies-lab/6-creating-details-buttons/images/add-behavior.png differ diff --git a/movies-lab/6-creating-details-buttons/images/add-button.png b/movies-lab/6-creating-details-buttons/images/add-button.png index 516515b8..48cdd810 100644 Binary files a/movies-lab/6-creating-details-buttons/images/add-button.png and b/movies-lab/6-creating-details-buttons/images/add-button.png differ diff --git a/movies-lab/6-creating-details-buttons/images/add-process.png b/movies-lab/6-creating-details-buttons/images/add-process.png index ca438b50..dcdfab79 100644 Binary files a/movies-lab/6-creating-details-buttons/images/add-process.png and b/movies-lab/6-creating-details-buttons/images/add-process.png differ diff --git a/movies-lab/6-creating-details-buttons/images/back-behavior.png b/movies-lab/6-creating-details-buttons/images/back-behavior.png index 6204f482..9d5b79d0 100644 Binary files a/movies-lab/6-creating-details-buttons/images/back-behavior.png and b/movies-lab/6-creating-details-buttons/images/back-behavior.png differ diff --git a/movies-lab/6-creating-details-buttons/images/back-properties.png b/movies-lab/6-creating-details-buttons/images/back-properties.png index 6c51a750..ebea56df 100644 Binary files a/movies-lab/6-creating-details-buttons/images/back-properties.png and b/movies-lab/6-creating-details-buttons/images/back-properties.png differ diff --git a/movies-lab/6-creating-details-buttons/images/buttons-region.png b/movies-lab/6-creating-details-buttons/images/buttons-region.png index a3acad30..acf6cc4f 100644 Binary files a/movies-lab/6-creating-details-buttons/images/buttons-region.png and b/movies-lab/6-creating-details-buttons/images/buttons-region.png differ diff --git a/movies-lab/6-creating-details-buttons/images/delete-cancel.png b/movies-lab/6-creating-details-buttons/images/delete-cancel.png index fb6f8b8d..4f2864dd 100644 Binary files a/movies-lab/6-creating-details-buttons/images/delete-cancel.png and b/movies-lab/6-creating-details-buttons/images/delete-cancel.png differ diff --git a/movies-lab/6-creating-details-buttons/images/popular-badge.png b/movies-lab/6-creating-details-buttons/images/popular-badge.png index c83df728..e2de2619 100644 Binary files a/movies-lab/6-creating-details-buttons/images/popular-badge.png and b/movies-lab/6-creating-details-buttons/images/popular-badge.png differ diff --git a/movies-lab/6-creating-details-buttons/images/popular-card-action.png b/movies-lab/6-creating-details-buttons/images/popular-card-action.png index 6bb4c3d2..7ef4e18a 100644 Binary files a/movies-lab/6-creating-details-buttons/images/popular-card-action.png and b/movies-lab/6-creating-details-buttons/images/popular-card-action.png differ diff --git a/movies-lab/6-creating-details-buttons/images/popular-lpp.png b/movies-lab/6-creating-details-buttons/images/popular-lpp.png index 12cedf32..85c9e6eb 100644 Binary files a/movies-lab/6-creating-details-buttons/images/popular-lpp.png and b/movies-lab/6-creating-details-buttons/images/popular-lpp.png differ diff --git a/movies-lab/6-creating-details-buttons/images/processing-tab.png b/movies-lab/6-creating-details-buttons/images/processing-tab.png index b3796c89..2d7b113d 100644 Binary files a/movies-lab/6-creating-details-buttons/images/processing-tab.png and b/movies-lab/6-creating-details-buttons/images/processing-tab.png differ diff --git a/movies-lab/6-creating-details-buttons/images/redirect-branch.png b/movies-lab/6-creating-details-buttons/images/redirect-branch.png index 86bf8d4f..62e3a9b7 100644 Binary files a/movies-lab/6-creating-details-buttons/images/redirect-branch.png and b/movies-lab/6-creating-details-buttons/images/redirect-branch.png differ diff --git a/movies-lab/7-implementing-watchlist-page/images/decade-facet.png b/movies-lab/7-implementing-watchlist-page/images/decade-facet.png index 171d2dd3..addb3b1b 100644 Binary files a/movies-lab/7-implementing-watchlist-page/images/decade-facet.png and b/movies-lab/7-implementing-watchlist-page/images/decade-facet.png differ diff --git a/movies-lab/7-implementing-watchlist-page/images/faceted-search.png b/movies-lab/7-implementing-watchlist-page/images/faceted-search.png index 23e684fe..0186d635 100644 Binary files a/movies-lab/7-implementing-watchlist-page/images/faceted-search.png and b/movies-lab/7-implementing-watchlist-page/images/faceted-search.png differ diff --git a/movies-lab/7-implementing-watchlist-page/images/filter-position.png b/movies-lab/7-implementing-watchlist-page/images/filter-position.png index 3ea43284..d322855c 100644 Binary files a/movies-lab/7-implementing-watchlist-page/images/filter-position.png and b/movies-lab/7-implementing-watchlist-page/images/filter-position.png differ diff --git a/movies-lab/7-implementing-watchlist-page/images/page-template.png b/movies-lab/7-implementing-watchlist-page/images/page-template.png index 076136be..53a51ccd 100644 Binary files a/movies-lab/7-implementing-watchlist-page/images/page-template.png and b/movies-lab/7-implementing-watchlist-page/images/page-template.png differ diff --git a/movies-lab/7-implementing-watchlist-page/images/runtime-facet.png b/movies-lab/7-implementing-watchlist-page/images/runtime-facet.png index e7f6ddcc..320dfbf9 100644 Binary files a/movies-lab/7-implementing-watchlist-page/images/runtime-facet.png and b/movies-lab/7-implementing-watchlist-page/images/runtime-facet.png differ diff --git a/movies-lab/7-implementing-watchlist-page/images/search-facet.png b/movies-lab/7-implementing-watchlist-page/images/search-facet.png index 21917215..cedb2079 100644 Binary files a/movies-lab/7-implementing-watchlist-page/images/search-facet.png and b/movies-lab/7-implementing-watchlist-page/images/search-facet.png differ diff --git a/movies-lab/7-implementing-watchlist-page/images/sort-by.png b/movies-lab/7-implementing-watchlist-page/images/sort-by.png index 33f4aadb..2c050040 100644 Binary files a/movies-lab/7-implementing-watchlist-page/images/sort-by.png and b/movies-lab/7-implementing-watchlist-page/images/sort-by.png differ diff --git a/movies-lab/7-implementing-watchlist-page/images/sort-values.png b/movies-lab/7-implementing-watchlist-page/images/sort-values.png index 68cbc95f..8522fa00 100644 Binary files a/movies-lab/7-implementing-watchlist-page/images/sort-values.png and b/movies-lab/7-implementing-watchlist-page/images/sort-values.png differ diff --git a/movies-lab/7-implementing-watchlist-page/images/watched-facet.png b/movies-lab/7-implementing-watchlist-page/images/watched-facet.png index 9077b43a..64273eea 100644 Binary files a/movies-lab/7-implementing-watchlist-page/images/watched-facet.png and b/movies-lab/7-implementing-watchlist-page/images/watched-facet.png differ diff --git a/movies-lab/7-implementing-watchlist-page/images/watchlist-action.png b/movies-lab/7-implementing-watchlist-page/images/watchlist-action.png index 081681fb..a2249f2a 100644 Binary files a/movies-lab/7-implementing-watchlist-page/images/watchlist-action.png and b/movies-lab/7-implementing-watchlist-page/images/watchlist-action.png differ diff --git a/movies-lab/7-implementing-watchlist-page/images/watchlist-order-by.png b/movies-lab/7-implementing-watchlist-page/images/watchlist-order-by.png index d169068f..4221c1d9 100644 Binary files a/movies-lab/7-implementing-watchlist-page/images/watchlist-order-by.png and b/movies-lab/7-implementing-watchlist-page/images/watchlist-order-by.png differ diff --git a/movies-lab/7-implementing-watchlist-page/images/watchlist.png b/movies-lab/7-implementing-watchlist-page/images/watchlist.png index 52f23b97..d2417794 100644 Binary files a/movies-lab/7-implementing-watchlist-page/images/watchlist.png and b/movies-lab/7-implementing-watchlist-page/images/watchlist.png differ diff --git a/movies-lab/7-implementing-watchlist-page/implementing-watchlist-page.md b/movies-lab/7-implementing-watchlist-page/implementing-watchlist-page.md index ff02a07f..251e70ed 100644 --- a/movies-lab/7-implementing-watchlist-page/implementing-watchlist-page.md +++ b/movies-lab/7-implementing-watchlist-page/implementing-watchlist-page.md @@ -318,7 +318,7 @@ You now know how to filter data using a Faceted Search and sort data with a sele ## Stuck? Download the Application Here Stuck on a step or struggling with the lab? You can download a copy of the Movies Watchlist application through Lab 7 and follow the instructions below to import it into your Oracle APEX workspace. -- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-7-231.sql) to download a copy of the app at the end of Lab 7. +- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-7-232.sql) to download a copy of the app at the end of Lab 7. - You can import the app to your APEX workspace by clicking **Import** in the App Builder home page and following the wizard steps. @@ -346,4 +346,4 @@ Stuck on a step or struggling with the lab? You can download a copy of the Movie ## Acknowledgements - **Author** - Paige Hanssen -- **Last Updated By/Date** - Paige Hanssen, May 2023 \ No newline at end of file +- **Last Updated By/Date** - Paige Hanssen, November 2023 \ No newline at end of file diff --git a/movies-lab/8-adding-cast-list/adding-cast-list.md b/movies-lab/8-adding-cast-list/adding-cast-list.md index 66541efd..531b5cb1 100644 --- a/movies-lab/8-adding-cast-list/adding-cast-list.md +++ b/movies-lab/8-adding-cast-list/adding-cast-list.md @@ -87,14 +87,14 @@ You have now improved the Movie Details page further by displaying a list of cas ## Learn More -- [REST Data Sources Documentation](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/managing-REST-data-sources.html) +- [REST Data Sources Documentation](https://docs.oracle.com/en/database/oracle/apex/23.2/htmdb/managing-REST-data-sources.html) -- [Cards Documentation](https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/managing-cards.html) +- [Cards Documentation](https://docs.oracle.com/en/database/oracle/apex/23.2/htmdb/managing-cards.html) ## Stuck? Download the Application Here Stuck on a step or struggling with the lab? You can download a copy of the Movies Watchlist application through this lab and follow the instructions below to import it into your Oracle APEX workspace. -- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-8-231.sql) to download a copy of the app at the end of this lab. +- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-8-232.sql) to download a copy of the app at the end of this lab. - You can import the app to your APEX workspace by clicking **Import** in the App Builder home page and following the wizard steps. @@ -122,4 +122,4 @@ Stuck on a step or struggling with the lab? You can download a copy of the Movie ## Acknowledgements - **Author** - Paige Hanssen -- **Last Updated By/Date** - Paige Hanssen, May 2023 \ No newline at end of file +- **Last Updated By/Date** - Paige Hanssen, November 2023 \ No newline at end of file diff --git a/movies-lab/8-adding-cast-list/images/cast-parameter.png b/movies-lab/8-adding-cast-list/images/cast-parameter.png index c1a71670..6c4aadfa 100644 Binary files a/movies-lab/8-adding-cast-list/images/cast-parameter.png and b/movies-lab/8-adding-cast-list/images/cast-parameter.png differ diff --git a/movies-lab/8-adding-cast-list/images/cast.png b/movies-lab/8-adding-cast-list/images/cast.png index ebaac9f9..4d77b565 100644 Binary files a/movies-lab/8-adding-cast-list/images/cast.png and b/movies-lab/8-adding-cast-list/images/cast.png differ diff --git a/movies-lab/9-improving-app/images/app-definition.png b/movies-lab/9-improving-app/images/app-definition.png index 62d2af76..6b09828f 100644 Binary files a/movies-lab/9-improving-app/images/app-definition.png and b/movies-lab/9-improving-app/images/app-definition.png differ diff --git a/movies-lab/9-improving-app/images/app-footer.png b/movies-lab/9-improving-app/images/app-footer.png index 41a6528e..4e323466 100644 Binary files a/movies-lab/9-improving-app/images/app-footer.png and b/movies-lab/9-improving-app/images/app-footer.png differ diff --git a/movies-lab/9-improving-app/images/get-started.png b/movies-lab/9-improving-app/images/get-started.png index 5ddebffe..33e1f3b6 100644 Binary files a/movies-lab/9-improving-app/images/get-started.png and b/movies-lab/9-improving-app/images/get-started.png differ diff --git a/movies-lab/9-improving-app/images/nav-menu.png b/movies-lab/9-improving-app/images/nav-menu.png index 8bca6b1d..ba282aa9 100644 Binary files a/movies-lab/9-improving-app/images/nav-menu.png and b/movies-lab/9-improving-app/images/nav-menu.png differ diff --git a/movies-lab/9-improving-app/images/watchlist-css.png b/movies-lab/9-improving-app/images/watchlist-css.png index c4f46192..7d108bc5 100644 Binary files a/movies-lab/9-improving-app/images/watchlist-css.png and b/movies-lab/9-improving-app/images/watchlist-css.png differ diff --git a/movies-lab/9-improving-app/improving-watchlist-page.md b/movies-lab/9-improving-app/improving-watchlist-page.md index 6dc2fc1a..3a7fcf80 100644 --- a/movies-lab/9-improving-app/improving-watchlist-page.md +++ b/movies-lab/9-improving-app/improving-watchlist-page.md @@ -148,7 +148,7 @@ You have now completed your Movies Watchlist application and can search for movi ## Stuck? Download the Application Here Stuck on a step or struggling with the lab? You can download a copy of the Movies Watchlist application and follow the instructions below to import it into your Oracle APEX workspace. -- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-9-231.sql) to download a copy of the completed app. +- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/lab-9-232.sql) to download a copy of the completed app. - You can import the app to your APEX workspace by clicking **Import** in the App Builder home page and following the wizard steps. @@ -176,4 +176,4 @@ Stuck on a step or struggling with the lab? You can download a copy of the Movie ## Acknowledgements - **Author** - Paige Hanssen -- **Last Updated By/Date** - Paige Hanssen, May 2023 \ No newline at end of file +- **Last Updated By/Date** - Paige Hanssen, November 2023 \ No newline at end of file diff --git a/movies-lab/intro/intro.md b/movies-lab/intro/intro.md index 7c31b10f..3a6017c3 100644 --- a/movies-lab/intro/intro.md +++ b/movies-lab/intro/intro.md @@ -11,7 +11,7 @@ Estimated Workshop Time: 2 hours Watch the video below for a quick walk-through of the workshop. [Walkthrough video of the entire workshop](videohub:1_vdi0shy5) -*Note: This lab assumes you are using Oracle APEX 23.1.* +*Note: This lab assumes you are using Oracle APEX 23.2.* ### Objectives In this lab, you will: @@ -44,7 +44,7 @@ In this lab, you will: ### Downloads -- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/movies-watchlist-231.sql) to download the completed application. +- [Click here](https://objectstorage.us-ashburn-1.oraclecloud.com/p/Ei1_2QRw4M8tQpk59Qhao2JCvEivSAX8MGB9R6PfHZlqNkpkAcnVg4V3-GyTs1_t/n/c4u04/b/livelabsfiles/o/oci-library/build-movies-watchlist-app-using-apex/movies-watchlist-232.sql) to download the completed application. ## Learn More