Skip to content

Documentation for Minimal Viable Solution implementation of LearnDB with pgweb

Jump to bottom
Adam Jeniski edited this page Oct 27, 2019 · 22 revisions

Installation:

  • Install IIS, following the instructions as described here under the heading "Add IIS Manager".
  • Install the URL-rewrite 2.1 extension as described here under the heading "Setting up the reverse proxy for HTTPS connections".
    • Additional context for several steps:
      • Step 1:
        • Within IIS, open up the "Default Web Site" by expanding the tabs in the "Connections" window and double click on the site. The "Bindings..." option will appear in the "Actions" window on the far right, under the "Edit Site" tab.
      • Step 7:
        • Enter localhost:8081 into the only active input box, then stop after step 7. We do not need to allow "Rewrite the domain names of links in HTTP responses".
  • Download/Install node.js with npm via this link. I used the Long Term Support version.
  • Clone, (fork, or download) the temp branch of the LearnDB GitHub repo in order to work with the files locally.
    • To install the specific npm packages/modules required, navigate to the src fold of the LearnDB clone, then run the command npm install
  • To install pgweb, follow the directions as described here.

How to Run each Service:

  • pgweb:
    • Run from the command line with the flag --sessions
    • (By default in the DASSL VM, pgweb is intalled in C:/pgweb)
  • IIS:
    • Start from GUI. Search for iis in the windows search feature. Select "Internet Information Services (IIS) Manager"
    • Expand the tabs under the "Connections" window on the far left and navigate to and double click on "Default Web Site".
    • Click "Start" on the right-hand side in the "Actions" tab, underneath the "Manage Website" sub-tab.
  • LearnDB node.js server for Change Password functionality:
    • In a command terminal, navigate to the src folder of the LearnDB clone, then run the command npm start. <<<<<<< HEAD

How to import rules:

  • Go to the /scripts/ folder of the cloned 'temp' branch of the LearnDB repo.
  • Run the importRules.bat script

How to export rules:

  • Go to the /scripts/ folder of the cloned 'temp' branch of the LearnDB repo.
  • Run the exportRules.bat script

Common Errors:

  • If you are getting a 404 error, make sure that ARR is installed and enabled, then restart IIS.
    • To install ARR, open IIS. In the 'Connections' tab on the far left, navigate to "Default Web Site".
    • Double click on "Add Rules..." in the 'Action' tab.
    • Double click on "Reverse Proxy"
    • If a window pops up asking you to Download ARR, follow the prompts. Else, if a window appears allowing you to input a reverse proxy rule, then ARR is already installed and enabled. You may need to try creating a reverse proxy again after installing it for the first time in order to enable ARR. If ARR is installed but not enabled, it will prompt the user asking if they wish to enable ARR upon trying to create a reverse proxy rule. =======

Rules to Implement the HTML rewriting for the content of pgweb

Rules to Change the Title and Header of the page:

  • Add an outbound blank rule titled "Change Title"
    • Set the "Pattern" field of the "Match" section to <title>pgweb</title>
    • Set the "Value" field of the "Action" section to <title>LearnDB</title>
  • Add an outbound blank rule titled "Change Header"
    • Set the "Pattern" field of the "Match" section to <h1>pgweb</h1>
    • Set the "Value" field of the "Action" section to <h1>LearnDB</h1>

Rules to Reorganize the input boxes on the homepage:

  • Add an outbound blank rule titled "Change Username Label to Database"
    • Set the "Pattern" field of the "Match" section to <label class="col-sm-3 control-label">Username</label>
    • Set the "Value" field of the "Action" section to <label class="col-sm-3 control-label" name="labelDB">Database</label>
  • Add an outbound blank rule titled "Change Username Input to Database Input"
    • Set the "Pattern" field of the "Match" section to <input type="text" id="pg_user" class="form-control" />
    • Set the "Value" field of the "Action" section to <input type="text" id="pg_db" name="inputDB" class="form-control" />
  • Add an outbound blank rule titled "Change Password Label to Username"
    • Set the "Pattern" field of the "Match" section to <label class="col-sm-3 control-label">Password</label>
    • Set the "Value" field of the "Action" section to <label class="col-sm-3 control-label" name="labelUsr">Username</label>
  • Add an outbound blank rule titled "Change Password Input to Username Input"
    • Set the "Pattern" field of the "Match" section to <input type="password" id="pg_password" class="form-control" />
    • Set the "Value" field of the "Action" section to <input type="text" id="pg_user" name="inputUsr" class="form-control" />
  • Add an outbound blank rule titled "Change Database Label to Password Label"
    • Set the "Pattern" field of the "Match" section to <label class="col-sm-3 control-label">Database</label>
    • Set the "Value" field of the "Action" section to <label class="col-sm-3 control-label" name="labelPasswd">Password</label>
  • Add an outbound blank rule titled "Change Database Input to Password Input"
    • Set the "Pattern" field of the "Match" section to <input type="text" id="pg_db" class="form-control" />
    • Set the "Value" field of the "Action" section to <input type="password" id="pg_password" name="inputPasswd" class="form-control" />

Rules to Add the "Change Password" link on the homepage:

  • Add an outbound blank rule titled "Add Link to Change Password Server After Connect Button"
    • Set the "Pattern" field of the "Match" section to <button type="button" id="close_connection_window" class="btn btn-block btn-default">Cancel</button>
    • Set the "Value" field of the "Action" section to <button type="button" id="close_connection_window" class="btn btn-block btn-default">Cancel</button></div><div class="col-sm-12" name="divChangePasswd"><p class="help-block"><a href="http://localhost:5000">Change Password</a></p>

Rules to Add the "About" tab within the DB viewer of pgweb:

  • Add an outbound blank rule titled "Add About Tab after Connections"
    • Set the "Pattern" field of the "Match" section to <li id="table_connection">Connection</li>
    • Set the "Value" field of the "Action" section to <li id="table_connection">Connection</li><li id="table_about">About</li>
  • Add an outbound blank rule titled "Change pgweb's app.js to my js file to control the Tabs"
    • Set the "Pattern" field of the "Match" section to <li id="table_connection">Connection</li><li id="table_about">About</li>
    • Set the "Value" field of the "Action" section to <script type="text/javascript" src="http://localhost:5000/javascript/pgweb_app.js"></script>
      • Note that I have added this file to the LearnDB repo in the 'temp' branch. This file will be temporarily hosted on the node.js server for changing the password.

Changes that I've made to the 'temp' branch explained:

The diff/comparison for the 'temp' branch vs the 'dev' branch is available here.

  • I am hosting the static pgweb_app.js file that will replace pgweb's app.js file. This modification allows for the additional functionality of the "About" Tab within the DB viewer page. This file is located at src/client/javascript/pgweb_app.js. The specific changes to the javascript are minimal from pgweb's original file.
  • I have changed the src/client/views/index.html file to include the version, so it will appear more similar to the original pgweb HTML file. I also added a link to return to the homepage localhost:80 that will appear in the same position as the "Change Password" link that is present on the homepage.
  • I have changed the src/client/css/index.css file to include the styling for the .version class.
Clone this wiki locally