Added domain object for interacting with contact list

.quarto/xref/85c87286

@@ -1 +1 @@
-{"headings":[],"entries":[]}
+{"entries":[],"headings":[]}

01_main.ipynb

@@ -9,18 +9,9 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 55,
+   "execution_count": 1,
    "metadata": {},
-   "outputs": [
-    {
-     "name": "stdout",
-     "output_type": "stream",
-     "text": [
-      "The autoreload extension is already loaded. To reload it, use:\n",
-      "  %reload_ext autoreload\n"
-     ]
-    }
-   ],
+   "outputs": [],
    "source": [
     "%load_ext autoreload\n",
     "%autoreload 2"
@@ -28,33 +19,22 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 56,
+   "execution_count": 2,
    "metadata": {},
    "outputs": [],
    "source": [
     "#|export\n",
     "import pandas as pd\n",
-    "from flask import Flask, redirect, request\n",
-    "from flask import render_template\n",
-    "import json"
+    "from flask import Flask, redirect, request, render_template\n",
+    "import json\n",
+    "from IPython.display import display_html"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 57,
+   "execution_count": 3,
    "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "'contactdb.json'"
-      ]
-     },
-     "execution_count": 57,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
+   "outputs": [],
    "source": [
     "people = [\n",
     "    {\n",
@@ -121,15 +101,16 @@
     "\n",
     "# Writing the JSON data to a file\n",
     "file_path = 'contactdb.json'\n",
-    "with open(file_path, 'w') as json_file:\n",
-    "    json.dump(people, json_file, indent=4)\n",
-    "\n",
-    "file_path"
+    "# df = pd.read_json(file_path)\n",
+    "df = pd.DataFrame()\n",
+    "df = df.from_dict(people)\n",
+    "df['id'] = df.index\n",
+    "df.to_json(file_path, orient='records')"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 58,
+   "execution_count": 4,
    "metadata": {},
    "outputs": [
     {
@@ -138,46 +119,56 @@
        "[{'firstname': 'John',\n",
        "  'lastname': 'Doe',\n",
        "  'phone': '555-1234',\n",
-       "  'email': 'john.doe@example.com'},\n",
+       "  'email': 'john.doe@example.com',\n",
+       "  'id': 0},\n",
        " {'firstname': 'Jane',\n",
        "  'lastname': 'Smith',\n",
        "  'phone': '555-5678',\n",
-       "  'email': 'jane.smith@example.com'},\n",
+       "  'email': 'jane.smith@example.com',\n",
+       "  'id': 1},\n",
        " {'firstname': 'Alice',\n",
        "  'lastname': 'Johnson',\n",
        "  'phone': '555-8765',\n",
-       "  'email': 'alice.johnson@example.com'},\n",
+       "  'email': 'alice.johnson@example.com',\n",
+       "  'id': 2},\n",
        " {'firstname': 'Bob',\n",
        "  'lastname': 'Williams',\n",
        "  'phone': '555-4321',\n",
-       "  'email': 'bob.williams@example.com'},\n",
+       "  'email': 'bob.williams@example.com',\n",
+       "  'id': 3},\n",
        " {'firstname': 'Charlie',\n",
        "  'lastname': 'Brown',\n",
        "  'phone': '555-9876',\n",
-       "  'email': 'charlie.brown@example.com'},\n",
+       "  'email': 'charlie.brown@example.com',\n",
+       "  'id': 4},\n",
        " {'firstname': 'Diana',\n",
        "  'lastname': 'Miller',\n",
        "  'phone': '555-6543',\n",
-       "  'email': 'diana.miller@example.com'},\n",
+       "  'email': 'diana.miller@example.com',\n",
+       "  'id': 5},\n",
        " {'firstname': 'Edward',\n",
        "  'lastname': 'Davis',\n",
        "  'phone': '555-3456',\n",
-       "  'email': 'edward.davis@example.com'},\n",
+       "  'email': 'edward.davis@example.com',\n",
+       "  'id': 6},\n",
        " {'firstname': 'Fiona',\n",
        "  'lastname': 'Garcia',\n",
        "  'phone': '555-6789',\n",
-       "  'email': 'fiona.garcia@example.com'},\n",
+       "  'email': 'fiona.garcia@example.com',\n",
+       "  'id': 7},\n",
        " {'firstname': 'George',\n",
        "  'lastname': 'Martinez',\n",
        "  'phone': '555-7890',\n",
-       "  'email': 'george.martinez@example.com'},\n",
+       "  'email': 'george.martinez@example.com',\n",
+       "  'id': 8},\n",
        " {'firstname': 'Hannah',\n",
        "  'lastname': 'Rodriguez',\n",
        "  'phone': '555-8901',\n",
-       "  'email': 'hannah.rodriguez@example.com'}]"
+       "  'email': 'hannah.rodriguez@example.com',\n",
+       "  'id': 9}]"
       ]
      },
-     "execution_count": 58,
+     "execution_count": 4,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -189,7 +180,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 79,
+   "execution_count": 5,
    "metadata": {},
    "outputs": [
     {
@@ -217,6 +208,7 @@
        "      <th>lastname</th>\n",
        "      <th>phone</th>\n",
        "      <th>email</th>\n",
+       "      <th>id</th>\n",
        "    </tr>\n",
        "  </thead>\n",
        "  <tbody>\n",
@@ -226,17 +218,18 @@
        "      <td>Doe</td>\n",
        "      <td>555-1234</td>\n",
        "      <td>john.doe@example.com</td>\n",
+       "      <td>0</td>\n",
        "    </tr>\n",
        "  </tbody>\n",
        "</table>\n",
        "</div>"
       ],
       "text/plain": [
-       "  firstname lastname     phone                 email\n",
-       "0      John      Doe  555-1234  john.doe@example.com"
+       "  firstname lastname     phone                 email  id\n",
+       "0      John      Doe  555-1234  john.doe@example.com   0"
       ]
      },
-     "execution_count": 79,
+     "execution_count": 5,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -253,14 +246,182 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 80,
+   "execution_count": 6,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "db.columns\n",
+    "\n",
+    "a={'firstname': 'Rahul',\n",
+    "   'lastname': 'Saraf',\n",
+    "    'phone':'7347306799',\n",
+    "    'email': 'rahuketu86'}\n",
+    "a['id'] = len(db)\n",
+    "# db.loc[len(db)] = \n",
+    "a\n",
+    "db.loc[len(db), a.keys()] = a.values()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 7,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<div>\n",
+       "<style scoped>\n",
+       "    .dataframe tbody tr th:only-of-type {\n",
+       "        vertical-align: middle;\n",
+       "    }\n",
+       "\n",
+       "    .dataframe tbody tr th {\n",
+       "        vertical-align: top;\n",
+       "    }\n",
+       "\n",
+       "    .dataframe thead th {\n",
+       "        text-align: right;\n",
+       "    }\n",
+       "</style>\n",
+       "<table border=\"1\" class=\"dataframe\">\n",
+       "  <thead>\n",
+       "    <tr style=\"text-align: right;\">\n",
+       "      <th></th>\n",
+       "      <th>firstname</th>\n",
+       "      <th>lastname</th>\n",
+       "      <th>phone</th>\n",
+       "      <th>email</th>\n",
+       "      <th>id</th>\n",
+       "    </tr>\n",
+       "  </thead>\n",
+       "  <tbody>\n",
+       "    <tr>\n",
+       "      <th>0</th>\n",
+       "      <td>John</td>\n",
+       "      <td>Doe</td>\n",
+       "      <td>555-1234</td>\n",
+       "      <td>john.doe@example.com</td>\n",
+       "      <td>0.0</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>1</th>\n",
+       "      <td>Jane</td>\n",
+       "      <td>Smith</td>\n",
+       "      <td>555-5678</td>\n",
+       "      <td>jane.smith@example.com</td>\n",
+       "      <td>1.0</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>2</th>\n",
+       "      <td>Alice</td>\n",
+       "      <td>Johnson</td>\n",
+       "      <td>555-8765</td>\n",
+       "      <td>alice.johnson@example.com</td>\n",
+       "      <td>2.0</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>3</th>\n",
+       "      <td>Bob</td>\n",
+       "      <td>Williams</td>\n",
+       "      <td>555-4321</td>\n",
+       "      <td>bob.williams@example.com</td>\n",
+       "      <td>3.0</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>4</th>\n",
+       "      <td>Charlie</td>\n",
+       "      <td>Brown</td>\n",
+       "      <td>555-9876</td>\n",
+       "      <td>charlie.brown@example.com</td>\n",
+       "      <td>4.0</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>5</th>\n",
+       "      <td>Diana</td>\n",
+       "      <td>Miller</td>\n",
+       "      <td>555-6543</td>\n",
+       "      <td>diana.miller@example.com</td>\n",
+       "      <td>5.0</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>6</th>\n",
+       "      <td>Edward</td>\n",
+       "      <td>Davis</td>\n",
+       "      <td>555-3456</td>\n",
+       "      <td>edward.davis@example.com</td>\n",
+       "      <td>6.0</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>7</th>\n",
+       "      <td>Fiona</td>\n",
+       "      <td>Garcia</td>\n",
+       "      <td>555-6789</td>\n",
+       "      <td>fiona.garcia@example.com</td>\n",
+       "      <td>7.0</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>8</th>\n",
+       "      <td>George</td>\n",
+       "      <td>Martinez</td>\n",
+       "      <td>555-7890</td>\n",
+       "      <td>george.martinez@example.com</td>\n",
+       "      <td>8.0</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>9</th>\n",
+       "      <td>Hannah</td>\n",
+       "      <td>Rodriguez</td>\n",
+       "      <td>555-8901</td>\n",
+       "      <td>hannah.rodriguez@example.com</td>\n",
+       "      <td>9.0</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>10</th>\n",
+       "      <td>Rahul</td>\n",
+       "      <td>Saraf</td>\n",
+       "      <td>7347306799</td>\n",
+       "      <td>rahuketu86</td>\n",
+       "      <td>10.0</td>\n",
+       "    </tr>\n",
+       "  </tbody>\n",
+       "</table>\n",
+       "</div>"
+      ],
+      "text/plain": [
+       "   firstname   lastname       phone                         email    id\n",
+       "0       John        Doe    555-1234          john.doe@example.com   0.0\n",
+       "1       Jane      Smith    555-5678        jane.smith@example.com   1.0\n",
+       "2      Alice    Johnson    555-8765     alice.johnson@example.com   2.0\n",
+       "3        Bob   Williams    555-4321      bob.williams@example.com   3.0\n",
+       "4    Charlie      Brown    555-9876     charlie.brown@example.com   4.0\n",
+       "5      Diana     Miller    555-6543      diana.miller@example.com   5.0\n",
+       "6     Edward      Davis    555-3456      edward.davis@example.com   6.0\n",
+       "7      Fiona     Garcia    555-6789      fiona.garcia@example.com   7.0\n",
+       "8     George   Martinez    555-7890   george.martinez@example.com   8.0\n",
+       "9     Hannah  Rodriguez    555-8901  hannah.rodriguez@example.com   9.0\n",
+       "10     Rahul      Saraf  7347306799                    rahuketu86  10.0"
+      ]
+     },
+     "execution_count": 7,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "db"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 8,
    "metadata": {},
    "outputs": [],
    "source": [
     "#|export\n",
     "class Contact(object):\n",
     "    def __init__(self) -> None:\n",
-    "        self.db = pd.read_json('contactdb.json')\n",
+    "        self.refresh()\n",
     "\n",
     "    def search(self, q):\n",
     "        predicate_firstname = self.db['firstname'].str.lower().str.contains(q.lower())\n",
@@ -269,30 +430,187 @@
     "        predicate_email= self.db['email'].str.lower().str.contains(q.lower())\n",
     "        filter_df = self.db[predicate_firstname|predicate_lastname|predicate_phone|predicate_email]\n",
     "        return filter_df.to_dict('records')\n",
+    "    \n",
+    "    def refresh(self):\n",
+    "        self.file_path = 'contactdb.json'\n",
+    "        self.db = pd.read_json(self.file_path)\n",
+    "\n",
     "\n",
     "    def all(self):\n",
-    "        return self.db.to_dict('records')"
+    "        return self.db.to_dict('records')\n",
+    "    \n",
+    "    def get(self, id):\n",
+    "        contact = self.db[self.db['id']==id]\n",
+    "        # print(contact)\n",
+    "        return contact.to_dict('records')[0]\n",
+    "    \n",
+    "    def add(self, firstname, lastname, phone, email):\n",
+    "        a={'firstname': firstname,\n",
+    "           'lastname': lastname,\n",
+    "           'phone':phone,\n",
+    "           'email': email}\n",
+    "        a['id'] = len(self.db)\n",
+    "        self.db.loc[len(self.db), a.keys()] = a.values()\n",
+    "        self.db.to_json(file_path, orient='records')\n",
+    "        self.refresh()\n",
+    "\n",
+    "    def delete(self, id):\n",
+    "        self.db.drop(index=id, inplace=True, errors='raise')\n",
+    "        self.db.to_json(file_path, orient='records')\n",
+    "        self.refresh()\n",
+    "\n",
+    "    def edit(self, id, firstname, lastname, phone, email):\n",
+    "        a={'firstname': firstname,\n",
+    "           'lastname': lastname,\n",
+    "           'phone':phone,\n",
+    "           'email': email,\n",
+    "           'id': id}\n",
+    "        self.db.loc[id, a.keys()] = a.values()\n",
+    "        self.db.to_json(file_path, orient='records')\n",
+    "        self.refresh()\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 10,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "dict_values(['Alice', 'Johnson', '555-8765', 'alice.johnson@example.com', 2])"
+      ]
+     },
+     "execution_count": 10,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "c = Contact()\n",
+    "c.db.loc[2].to_dict().values()"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 81,
+   "execution_count": 11,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "{'firstname': 'Alice',\n",
+       " 'lastname': 'Johnson',\n",
+       " 'phone': '555-8767',\n",
+       " 'email': 'alice.johnson@example.com',\n",
+       " 'id': 2}"
+      ]
+     },
+     "execution_count": 11,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "new_vals = [2, 'Alice', 'Johnson', '555-8767', 'alice.johnson@example.com']\n",
+    "c.edit(*new_vals)\n",
+    "c.get(2)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 13,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "[{'firstname': 'Alice',\n",
+       "  'lastname': 'Johnson',\n",
+       "  'phone': '555-8767',\n",
+       "  'email': 'alice.johnson@example.com',\n",
+       "  'id': 2},\n",
+       " {'firstname': 'Bob',\n",
+       "  'lastname': 'Williams',\n",
+       "  'phone': '555-4321',\n",
+       "  'email': 'bob.williams@example.com',\n",
+       "  'id': 3},\n",
+       " {'firstname': 'Charlie',\n",
+       "  'lastname': 'Brown',\n",
+       "  'phone': '555-9876',\n",
+       "  'email': 'charlie.brown@example.com',\n",
+       "  'id': 4},\n",
+       " {'firstname': 'Diana',\n",
+       "  'lastname': 'Miller',\n",
+       "  'phone': '555-6543',\n",
+       "  'email': 'diana.miller@example.com',\n",
+       "  'id': 5},\n",
+       " {'firstname': 'Edward',\n",
+       "  'lastname': 'Davis',\n",
+       "  'phone': '555-3456',\n",
+       "  'email': 'edward.davis@example.com',\n",
+       "  'id': 6},\n",
+       " {'firstname': 'Fiona',\n",
+       "  'lastname': 'Garcia',\n",
+       "  'phone': '555-6789',\n",
+       "  'email': 'fiona.garcia@example.com',\n",
+       "  'id': 7},\n",
+       " {'firstname': 'George',\n",
+       "  'lastname': 'Martinez',\n",
+       "  'phone': '555-7890',\n",
+       "  'email': 'george.martinez@example.com',\n",
+       "  'id': 8},\n",
+       " {'firstname': 'Hannah',\n",
+       "  'lastname': 'Rodriguez',\n",
+       "  'phone': '555-8901',\n",
+       "  'email': 'hannah.rodriguez@example.com',\n",
+       "  'id': 9},\n",
+       " {'firstname': 'John',\n",
+       "  'lastname': 'Doe',\n",
+       "  'phone': '555-1234',\n",
+       "  'email': 'john.doe@example.com',\n",
+       "  'id': 9},\n",
+       " {'firstname': 'Jane',\n",
+       "  'lastname': 'Smith',\n",
+       "  'phone': '555-5678',\n",
+       "  'email': 'jane.smith@example.com',\n",
+       "  'id': 9}]"
+      ]
+     },
+     "execution_count": 13,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "c = Contact()\n",
+    "a_dict = c.db.loc[0].to_dict()\n",
+    "a_dict.pop('id', None); a_dict\n",
+    "c.delete(0)\n",
+    "\n",
+    "c.add(*list(a_dict.values()))\n",
+    "c.all()\n",
+    "\n",
+    "\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 14,
    "metadata": {},
    "outputs": [],
    "source": [
     "#|export\n",
-    "\n",
     "app = Flask(__name__)"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 82,
+   "execution_count": 15,
    "metadata": {},
    "outputs": [],
    "source": [
     "#|export\n",
-    "\n",
     "@app.get(\"/\")\n",
     "def index():\n",
     "    return redirect(\"/contacts\")"
@@ -300,12 +618,11 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 83,
+   "execution_count": 16,
    "metadata": {},
    "outputs": [],
    "source": [
     "#|export\n",
-    "\n",
     "@app.get(\"/contacts\")\n",
     "def contacts():\n",
     "    search = request.args.get(\"q\")\n",
@@ -318,7 +635,134 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 84,
+   "execution_count": 17,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "{'firstname': 'Bob',\n",
+       " 'lastname': 'Williams',\n",
+       " 'phone': '555-4321',\n",
+       " 'email': 'bob.williams@example.com',\n",
+       " 'id': 3}"
+      ]
+     },
+     "execution_count": 17,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "Contact().db[df['id']==1].to_dict('records')[0]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 18,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "#|export\n",
+    "@app.get(\"/contacts/<int:id>\")\n",
+    "def view(id:int):\n",
+    "    return render_template(\"view.html\", contact=Contact().get(id))"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 19,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "<!doctype html>\n",
+      "<html>\n",
+      "    <head>\n",
+      "        <title>Contact.App</title>\n",
+      "        <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css\">\n",
+      "    </head>\n",
+      "    <body>\n",
+      "        <main class=\"container\">\n",
+      "            <h1> CONTACTS.APP</h1>\n",
+      "            <h2> A demo contact application </h2>\n",
+      "            <hr>\n",
+      "            \n",
+      "    <article>\n",
+      "        <h1>Alice Johnson </h1>\n",
+      "        <div role=\"group\">\n",
+      "            <div>555-8767</div>\n",
+      "            <div>alice.johnson@example.com</div>\n",
+      "        </div>\n",
+      "        <footer>\n",
+      "            <a href=\"/contacts\" role=\"button\">Back</a>\n",
+      "        </footer>\n",
+      "    </article>\n",
+      "\n",
+      "        </main>\n",
+      "    </body>\n",
+      "</html>\n"
+     ]
+    }
+   ],
+   "source": [
+    "with app.app_context():\n",
+    "    print(view(2))"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 20,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "{'firstname': 'Alice',\n",
+       " 'lastname': 'Johnson',\n",
+       " 'phone': '555-8767',\n",
+       " 'email': 'alice.johnson@example.com',\n",
+       " 'id': 2}"
+      ]
+     },
+     "execution_count": 20,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "Contact().get(2)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 21,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "#|export\n",
+    "@app.put(\"/contacts/<int:id>/edit\")\n",
+    "def edit(id):\n",
+    "    return \"Edit View\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 22,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "#|export\n",
+    "@app.post(\"/contacts/new\")\n",
+    "def new():\n",
+    "    return \"New View\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 24,
    "metadata": {},
    "outputs": [],
    "source": [

_site/01_main.html

@@ -198,148 +198,149 @@ pre > code.sourceCode > span > a:first-child::before { text-decoration: underlin
 
 
 <!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->
-<div id="cell-2" class="cell" data-execution_count="55">
-<div class="sourceCode cell-code" id="cb1"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
-<div class="cell-output cell-output-stdout">
-<pre><code>The autoreload extension is already loaded. To reload it, use:
-  %reload_ext autoreload</code></pre>
-</div>
-</div>
-<div id="cell-3" class="cell" data-execution_count="56">
-<div class="sourceCode cell-code" id="cb3"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> pandas <span class="im">as</span> pd</span>
-<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a><span class="im">from</span> flask <span class="im">import</span> Flask, redirect, request</span>
-<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a><span class="im">from</span> flask <span class="im">import</span> render_template</span>
-<span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> json</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
-</div>
-<div id="cell-4" class="cell" data-execution_count="57">
-<div class="sourceCode cell-code" id="cb4"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a>people <span class="op">=</span> [</span>
-<span id="cb4-2"><a href="#cb4-2" aria-hidden="true" tabindex="-1"></a>    {</span>
-<span id="cb4-3"><a href="#cb4-3" aria-hidden="true" tabindex="-1"></a>        <span class="st">"firstname"</span>: <span class="st">"John"</span>,</span>
-<span id="cb4-4"><a href="#cb4-4" aria-hidden="true" tabindex="-1"></a>        <span class="st">"lastname"</span>: <span class="st">"Doe"</span>,</span>
-<span id="cb4-5"><a href="#cb4-5" aria-hidden="true" tabindex="-1"></a>        <span class="st">"phone"</span>: <span class="st">"555-1234"</span>,</span>
-<span id="cb4-6"><a href="#cb4-6" aria-hidden="true" tabindex="-1"></a>        <span class="st">"email"</span>: <span class="st">"john.doe@example.com"</span></span>
-<span id="cb4-7"><a href="#cb4-7" aria-hidden="true" tabindex="-1"></a>    },</span>
-<span id="cb4-8"><a href="#cb4-8" aria-hidden="true" tabindex="-1"></a>    {</span>
-<span id="cb4-9"><a href="#cb4-9" aria-hidden="true" tabindex="-1"></a>        <span class="st">"firstname"</span>: <span class="st">"Jane"</span>,</span>
-<span id="cb4-10"><a href="#cb4-10" aria-hidden="true" tabindex="-1"></a>        <span class="st">"lastname"</span>: <span class="st">"Smith"</span>,</span>
-<span id="cb4-11"><a href="#cb4-11" aria-hidden="true" tabindex="-1"></a>        <span class="st">"phone"</span>: <span class="st">"555-5678"</span>,</span>
-<span id="cb4-12"><a href="#cb4-12" aria-hidden="true" tabindex="-1"></a>        <span class="st">"email"</span>: <span class="st">"jane.smith@example.com"</span></span>
-<span id="cb4-13"><a href="#cb4-13" aria-hidden="true" tabindex="-1"></a>    },</span>
-<span id="cb4-14"><a href="#cb4-14" aria-hidden="true" tabindex="-1"></a>    {</span>
-<span id="cb4-15"><a href="#cb4-15" aria-hidden="true" tabindex="-1"></a>        <span class="st">"firstname"</span>: <span class="st">"Alice"</span>,</span>
-<span id="cb4-16"><a href="#cb4-16" aria-hidden="true" tabindex="-1"></a>        <span class="st">"lastname"</span>: <span class="st">"Johnson"</span>,</span>
-<span id="cb4-17"><a href="#cb4-17" aria-hidden="true" tabindex="-1"></a>        <span class="st">"phone"</span>: <span class="st">"555-8765"</span>,</span>
-<span id="cb4-18"><a href="#cb4-18" aria-hidden="true" tabindex="-1"></a>        <span class="st">"email"</span>: <span class="st">"alice.johnson@example.com"</span></span>
-<span id="cb4-19"><a href="#cb4-19" aria-hidden="true" tabindex="-1"></a>    },</span>
-<span id="cb4-20"><a href="#cb4-20" aria-hidden="true" tabindex="-1"></a>    {</span>
-<span id="cb4-21"><a href="#cb4-21" aria-hidden="true" tabindex="-1"></a>        <span class="st">"firstname"</span>: <span class="st">"Bob"</span>,</span>
-<span id="cb4-22"><a href="#cb4-22" aria-hidden="true" tabindex="-1"></a>        <span class="st">"lastname"</span>: <span class="st">"Williams"</span>,</span>
-<span id="cb4-23"><a href="#cb4-23" aria-hidden="true" tabindex="-1"></a>        <span class="st">"phone"</span>: <span class="st">"555-4321"</span>,</span>
-<span id="cb4-24"><a href="#cb4-24" aria-hidden="true" tabindex="-1"></a>        <span class="st">"email"</span>: <span class="st">"bob.williams@example.com"</span></span>
-<span id="cb4-25"><a href="#cb4-25" aria-hidden="true" tabindex="-1"></a>    },</span>
-<span id="cb4-26"><a href="#cb4-26" aria-hidden="true" tabindex="-1"></a>    {</span>
-<span id="cb4-27"><a href="#cb4-27" aria-hidden="true" tabindex="-1"></a>        <span class="st">"firstname"</span>: <span class="st">"Charlie"</span>,</span>
-<span id="cb4-28"><a href="#cb4-28" aria-hidden="true" tabindex="-1"></a>        <span class="st">"lastname"</span>: <span class="st">"Brown"</span>,</span>
-<span id="cb4-29"><a href="#cb4-29" aria-hidden="true" tabindex="-1"></a>        <span class="st">"phone"</span>: <span class="st">"555-9876"</span>,</span>
-<span id="cb4-30"><a href="#cb4-30" aria-hidden="true" tabindex="-1"></a>        <span class="st">"email"</span>: <span class="st">"charlie.brown@example.com"</span></span>
-<span id="cb4-31"><a href="#cb4-31" aria-hidden="true" tabindex="-1"></a>    },</span>
-<span id="cb4-32"><a href="#cb4-32" aria-hidden="true" tabindex="-1"></a>    {</span>
-<span id="cb4-33"><a href="#cb4-33" aria-hidden="true" tabindex="-1"></a>        <span class="st">"firstname"</span>: <span class="st">"Diana"</span>,</span>
-<span id="cb4-34"><a href="#cb4-34" aria-hidden="true" tabindex="-1"></a>        <span class="st">"lastname"</span>: <span class="st">"Miller"</span>,</span>
-<span id="cb4-35"><a href="#cb4-35" aria-hidden="true" tabindex="-1"></a>        <span class="st">"phone"</span>: <span class="st">"555-6543"</span>,</span>
-<span id="cb4-36"><a href="#cb4-36" aria-hidden="true" tabindex="-1"></a>        <span class="st">"email"</span>: <span class="st">"diana.miller@example.com"</span></span>
-<span id="cb4-37"><a href="#cb4-37" aria-hidden="true" tabindex="-1"></a>    },</span>
-<span id="cb4-38"><a href="#cb4-38" aria-hidden="true" tabindex="-1"></a>    {</span>
-<span id="cb4-39"><a href="#cb4-39" aria-hidden="true" tabindex="-1"></a>        <span class="st">"firstname"</span>: <span class="st">"Edward"</span>,</span>
-<span id="cb4-40"><a href="#cb4-40" aria-hidden="true" tabindex="-1"></a>        <span class="st">"lastname"</span>: <span class="st">"Davis"</span>,</span>
-<span id="cb4-41"><a href="#cb4-41" aria-hidden="true" tabindex="-1"></a>        <span class="st">"phone"</span>: <span class="st">"555-3456"</span>,</span>
-<span id="cb4-42"><a href="#cb4-42" aria-hidden="true" tabindex="-1"></a>        <span class="st">"email"</span>: <span class="st">"edward.davis@example.com"</span></span>
-<span id="cb4-43"><a href="#cb4-43" aria-hidden="true" tabindex="-1"></a>    },</span>
-<span id="cb4-44"><a href="#cb4-44" aria-hidden="true" tabindex="-1"></a>    {</span>
-<span id="cb4-45"><a href="#cb4-45" aria-hidden="true" tabindex="-1"></a>        <span class="st">"firstname"</span>: <span class="st">"Fiona"</span>,</span>
-<span id="cb4-46"><a href="#cb4-46" aria-hidden="true" tabindex="-1"></a>        <span class="st">"lastname"</span>: <span class="st">"Garcia"</span>,</span>
-<span id="cb4-47"><a href="#cb4-47" aria-hidden="true" tabindex="-1"></a>        <span class="st">"phone"</span>: <span class="st">"555-6789"</span>,</span>
-<span id="cb4-48"><a href="#cb4-48" aria-hidden="true" tabindex="-1"></a>        <span class="st">"email"</span>: <span class="st">"fiona.garcia@example.com"</span></span>
-<span id="cb4-49"><a href="#cb4-49" aria-hidden="true" tabindex="-1"></a>    },</span>
-<span id="cb4-50"><a href="#cb4-50" aria-hidden="true" tabindex="-1"></a>    {</span>
-<span id="cb4-51"><a href="#cb4-51" aria-hidden="true" tabindex="-1"></a>        <span class="st">"firstname"</span>: <span class="st">"George"</span>,</span>
-<span id="cb4-52"><a href="#cb4-52" aria-hidden="true" tabindex="-1"></a>        <span class="st">"lastname"</span>: <span class="st">"Martinez"</span>,</span>
-<span id="cb4-53"><a href="#cb4-53" aria-hidden="true" tabindex="-1"></a>        <span class="st">"phone"</span>: <span class="st">"555-7890"</span>,</span>
-<span id="cb4-54"><a href="#cb4-54" aria-hidden="true" tabindex="-1"></a>        <span class="st">"email"</span>: <span class="st">"george.martinez@example.com"</span></span>
-<span id="cb4-55"><a href="#cb4-55" aria-hidden="true" tabindex="-1"></a>    },</span>
-<span id="cb4-56"><a href="#cb4-56" aria-hidden="true" tabindex="-1"></a>    {</span>
-<span id="cb4-57"><a href="#cb4-57" aria-hidden="true" tabindex="-1"></a>        <span class="st">"firstname"</span>: <span class="st">"Hannah"</span>,</span>
-<span id="cb4-58"><a href="#cb4-58" aria-hidden="true" tabindex="-1"></a>        <span class="st">"lastname"</span>: <span class="st">"Rodriguez"</span>,</span>
-<span id="cb4-59"><a href="#cb4-59" aria-hidden="true" tabindex="-1"></a>        <span class="st">"phone"</span>: <span class="st">"555-8901"</span>,</span>
-<span id="cb4-60"><a href="#cb4-60" aria-hidden="true" tabindex="-1"></a>        <span class="st">"email"</span>: <span class="st">"hannah.rodriguez@example.com"</span></span>
-<span id="cb4-61"><a href="#cb4-61" aria-hidden="true" tabindex="-1"></a>    }</span>
-<span id="cb4-62"><a href="#cb4-62" aria-hidden="true" tabindex="-1"></a>]</span>
-<span id="cb4-63"><a href="#cb4-63" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb4-64"><a href="#cb4-64" aria-hidden="true" tabindex="-1"></a><span class="co"># Writing the JSON data to a file</span></span>
-<span id="cb4-65"><a href="#cb4-65" aria-hidden="true" tabindex="-1"></a>file_path <span class="op">=</span> <span class="st">'contactdb.json'</span></span>
-<span id="cb4-66"><a href="#cb4-66" aria-hidden="true" tabindex="-1"></a><span class="cf">with</span> <span class="bu">open</span>(file_path, <span class="st">'w'</span>) <span class="im">as</span> json_file:</span>
-<span id="cb4-67"><a href="#cb4-67" aria-hidden="true" tabindex="-1"></a>    json.dump(people, json_file, indent<span class="op">=</span><span class="dv">4</span>)</span>
-<span id="cb4-68"><a href="#cb4-68" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb4-69"><a href="#cb4-69" aria-hidden="true" tabindex="-1"></a>file_path</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
-<div class="cell-output cell-output-display" data-execution_count="57">
-<pre><code>'contactdb.json'</code></pre>
-</div>
-</div>
-<div id="cell-5" class="cell" data-execution_count="58">
-<div class="sourceCode cell-code" id="cb6"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb6-1"><a href="#cb6-1" aria-hidden="true" tabindex="-1"></a>db <span class="op">=</span> pd.read_json(<span class="st">'contactdb.json'</span>)</span>
-<span id="cb6-2"><a href="#cb6-2" aria-hidden="true" tabindex="-1"></a>db.to_dict(<span class="st">'records'</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
-<div class="cell-output cell-output-display" data-execution_count="58">
+<div id="cell-3" class="cell" data-execution_count="2">
+<div class="sourceCode cell-code" id="cb1"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> pandas <span class="im">as</span> pd</span>
+<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a><span class="im">from</span> flask <span class="im">import</span> Flask, redirect, request, render_template</span>
+<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> json</span>
+<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a><span class="im">from</span> IPython.display <span class="im">import</span> display_html</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+</div>
+<div id="cell-4" class="cell" data-execution_count="3">
+<div class="sourceCode cell-code" id="cb2"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a>people <span class="op">=</span> [</span>
+<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a>    {</span>
+<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a>        <span class="st">"firstname"</span>: <span class="st">"John"</span>,</span>
+<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a>        <span class="st">"lastname"</span>: <span class="st">"Doe"</span>,</span>
+<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a>        <span class="st">"phone"</span>: <span class="st">"555-1234"</span>,</span>
+<span id="cb2-6"><a href="#cb2-6" aria-hidden="true" tabindex="-1"></a>        <span class="st">"email"</span>: <span class="st">"john.doe@example.com"</span></span>
+<span id="cb2-7"><a href="#cb2-7" aria-hidden="true" tabindex="-1"></a>    },</span>
+<span id="cb2-8"><a href="#cb2-8" aria-hidden="true" tabindex="-1"></a>    {</span>
+<span id="cb2-9"><a href="#cb2-9" aria-hidden="true" tabindex="-1"></a>        <span class="st">"firstname"</span>: <span class="st">"Jane"</span>,</span>
+<span id="cb2-10"><a href="#cb2-10" aria-hidden="true" tabindex="-1"></a>        <span class="st">"lastname"</span>: <span class="st">"Smith"</span>,</span>
+<span id="cb2-11"><a href="#cb2-11" aria-hidden="true" tabindex="-1"></a>        <span class="st">"phone"</span>: <span class="st">"555-5678"</span>,</span>
+<span id="cb2-12"><a href="#cb2-12" aria-hidden="true" tabindex="-1"></a>        <span class="st">"email"</span>: <span class="st">"jane.smith@example.com"</span></span>
+<span id="cb2-13"><a href="#cb2-13" aria-hidden="true" tabindex="-1"></a>    },</span>
+<span id="cb2-14"><a href="#cb2-14" aria-hidden="true" tabindex="-1"></a>    {</span>
+<span id="cb2-15"><a href="#cb2-15" aria-hidden="true" tabindex="-1"></a>        <span class="st">"firstname"</span>: <span class="st">"Alice"</span>,</span>
+<span id="cb2-16"><a href="#cb2-16" aria-hidden="true" tabindex="-1"></a>        <span class="st">"lastname"</span>: <span class="st">"Johnson"</span>,</span>
+<span id="cb2-17"><a href="#cb2-17" aria-hidden="true" tabindex="-1"></a>        <span class="st">"phone"</span>: <span class="st">"555-8765"</span>,</span>
+<span id="cb2-18"><a href="#cb2-18" aria-hidden="true" tabindex="-1"></a>        <span class="st">"email"</span>: <span class="st">"alice.johnson@example.com"</span></span>
+<span id="cb2-19"><a href="#cb2-19" aria-hidden="true" tabindex="-1"></a>    },</span>
+<span id="cb2-20"><a href="#cb2-20" aria-hidden="true" tabindex="-1"></a>    {</span>
+<span id="cb2-21"><a href="#cb2-21" aria-hidden="true" tabindex="-1"></a>        <span class="st">"firstname"</span>: <span class="st">"Bob"</span>,</span>
+<span id="cb2-22"><a href="#cb2-22" aria-hidden="true" tabindex="-1"></a>        <span class="st">"lastname"</span>: <span class="st">"Williams"</span>,</span>
+<span id="cb2-23"><a href="#cb2-23" aria-hidden="true" tabindex="-1"></a>        <span class="st">"phone"</span>: <span class="st">"555-4321"</span>,</span>
+<span id="cb2-24"><a href="#cb2-24" aria-hidden="true" tabindex="-1"></a>        <span class="st">"email"</span>: <span class="st">"bob.williams@example.com"</span></span>
+<span id="cb2-25"><a href="#cb2-25" aria-hidden="true" tabindex="-1"></a>    },</span>
+<span id="cb2-26"><a href="#cb2-26" aria-hidden="true" tabindex="-1"></a>    {</span>
+<span id="cb2-27"><a href="#cb2-27" aria-hidden="true" tabindex="-1"></a>        <span class="st">"firstname"</span>: <span class="st">"Charlie"</span>,</span>
+<span id="cb2-28"><a href="#cb2-28" aria-hidden="true" tabindex="-1"></a>        <span class="st">"lastname"</span>: <span class="st">"Brown"</span>,</span>
+<span id="cb2-29"><a href="#cb2-29" aria-hidden="true" tabindex="-1"></a>        <span class="st">"phone"</span>: <span class="st">"555-9876"</span>,</span>
+<span id="cb2-30"><a href="#cb2-30" aria-hidden="true" tabindex="-1"></a>        <span class="st">"email"</span>: <span class="st">"charlie.brown@example.com"</span></span>
+<span id="cb2-31"><a href="#cb2-31" aria-hidden="true" tabindex="-1"></a>    },</span>
+<span id="cb2-32"><a href="#cb2-32" aria-hidden="true" tabindex="-1"></a>    {</span>
+<span id="cb2-33"><a href="#cb2-33" aria-hidden="true" tabindex="-1"></a>        <span class="st">"firstname"</span>: <span class="st">"Diana"</span>,</span>
+<span id="cb2-34"><a href="#cb2-34" aria-hidden="true" tabindex="-1"></a>        <span class="st">"lastname"</span>: <span class="st">"Miller"</span>,</span>
+<span id="cb2-35"><a href="#cb2-35" aria-hidden="true" tabindex="-1"></a>        <span class="st">"phone"</span>: <span class="st">"555-6543"</span>,</span>
+<span id="cb2-36"><a href="#cb2-36" aria-hidden="true" tabindex="-1"></a>        <span class="st">"email"</span>: <span class="st">"diana.miller@example.com"</span></span>
+<span id="cb2-37"><a href="#cb2-37" aria-hidden="true" tabindex="-1"></a>    },</span>
+<span id="cb2-38"><a href="#cb2-38" aria-hidden="true" tabindex="-1"></a>    {</span>
+<span id="cb2-39"><a href="#cb2-39" aria-hidden="true" tabindex="-1"></a>        <span class="st">"firstname"</span>: <span class="st">"Edward"</span>,</span>
+<span id="cb2-40"><a href="#cb2-40" aria-hidden="true" tabindex="-1"></a>        <span class="st">"lastname"</span>: <span class="st">"Davis"</span>,</span>
+<span id="cb2-41"><a href="#cb2-41" aria-hidden="true" tabindex="-1"></a>        <span class="st">"phone"</span>: <span class="st">"555-3456"</span>,</span>
+<span id="cb2-42"><a href="#cb2-42" aria-hidden="true" tabindex="-1"></a>        <span class="st">"email"</span>: <span class="st">"edward.davis@example.com"</span></span>
+<span id="cb2-43"><a href="#cb2-43" aria-hidden="true" tabindex="-1"></a>    },</span>
+<span id="cb2-44"><a href="#cb2-44" aria-hidden="true" tabindex="-1"></a>    {</span>
+<span id="cb2-45"><a href="#cb2-45" aria-hidden="true" tabindex="-1"></a>        <span class="st">"firstname"</span>: <span class="st">"Fiona"</span>,</span>
+<span id="cb2-46"><a href="#cb2-46" aria-hidden="true" tabindex="-1"></a>        <span class="st">"lastname"</span>: <span class="st">"Garcia"</span>,</span>
+<span id="cb2-47"><a href="#cb2-47" aria-hidden="true" tabindex="-1"></a>        <span class="st">"phone"</span>: <span class="st">"555-6789"</span>,</span>
+<span id="cb2-48"><a href="#cb2-48" aria-hidden="true" tabindex="-1"></a>        <span class="st">"email"</span>: <span class="st">"fiona.garcia@example.com"</span></span>
+<span id="cb2-49"><a href="#cb2-49" aria-hidden="true" tabindex="-1"></a>    },</span>
+<span id="cb2-50"><a href="#cb2-50" aria-hidden="true" tabindex="-1"></a>    {</span>
+<span id="cb2-51"><a href="#cb2-51" aria-hidden="true" tabindex="-1"></a>        <span class="st">"firstname"</span>: <span class="st">"George"</span>,</span>
+<span id="cb2-52"><a href="#cb2-52" aria-hidden="true" tabindex="-1"></a>        <span class="st">"lastname"</span>: <span class="st">"Martinez"</span>,</span>
+<span id="cb2-53"><a href="#cb2-53" aria-hidden="true" tabindex="-1"></a>        <span class="st">"phone"</span>: <span class="st">"555-7890"</span>,</span>
+<span id="cb2-54"><a href="#cb2-54" aria-hidden="true" tabindex="-1"></a>        <span class="st">"email"</span>: <span class="st">"george.martinez@example.com"</span></span>
+<span id="cb2-55"><a href="#cb2-55" aria-hidden="true" tabindex="-1"></a>    },</span>
+<span id="cb2-56"><a href="#cb2-56" aria-hidden="true" tabindex="-1"></a>    {</span>
+<span id="cb2-57"><a href="#cb2-57" aria-hidden="true" tabindex="-1"></a>        <span class="st">"firstname"</span>: <span class="st">"Hannah"</span>,</span>
+<span id="cb2-58"><a href="#cb2-58" aria-hidden="true" tabindex="-1"></a>        <span class="st">"lastname"</span>: <span class="st">"Rodriguez"</span>,</span>
+<span id="cb2-59"><a href="#cb2-59" aria-hidden="true" tabindex="-1"></a>        <span class="st">"phone"</span>: <span class="st">"555-8901"</span>,</span>
+<span id="cb2-60"><a href="#cb2-60" aria-hidden="true" tabindex="-1"></a>        <span class="st">"email"</span>: <span class="st">"hannah.rodriguez@example.com"</span></span>
+<span id="cb2-61"><a href="#cb2-61" aria-hidden="true" tabindex="-1"></a>    }</span>
+<span id="cb2-62"><a href="#cb2-62" aria-hidden="true" tabindex="-1"></a>]</span>
+<span id="cb2-63"><a href="#cb2-63" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb2-64"><a href="#cb2-64" aria-hidden="true" tabindex="-1"></a><span class="co"># Writing the JSON data to a file</span></span>
+<span id="cb2-65"><a href="#cb2-65" aria-hidden="true" tabindex="-1"></a>file_path <span class="op">=</span> <span class="st">'contactdb.json'</span></span>
+<span id="cb2-66"><a href="#cb2-66" aria-hidden="true" tabindex="-1"></a><span class="co"># df = pd.read_json(file_path)</span></span>
+<span id="cb2-67"><a href="#cb2-67" aria-hidden="true" tabindex="-1"></a>df <span class="op">=</span> pd.DataFrame()</span>
+<span id="cb2-68"><a href="#cb2-68" aria-hidden="true" tabindex="-1"></a>df <span class="op">=</span> df.from_dict(people)</span>
+<span id="cb2-69"><a href="#cb2-69" aria-hidden="true" tabindex="-1"></a>df[<span class="st">'id'</span>] <span class="op">=</span> df.index</span>
+<span id="cb2-70"><a href="#cb2-70" aria-hidden="true" tabindex="-1"></a>df.to_json(file_path, orient<span class="op">=</span><span class="st">'records'</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+</div>
+<div id="cell-5" class="cell" data-execution_count="4">
+<div class="sourceCode cell-code" id="cb3"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a>db <span class="op">=</span> pd.read_json(<span class="st">'contactdb.json'</span>)</span>
+<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a>db.to_dict(<span class="st">'records'</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+<div class="cell-output cell-output-display" data-execution_count="4">
 <pre><code>[{'firstname': 'John',
   'lastname': 'Doe',
   'phone': '555-1234',
-  'email': 'john.doe@example.com'},
+  'email': 'john.doe@example.com',
+  'id': 0},
  {'firstname': 'Jane',
   'lastname': 'Smith',
   'phone': '555-5678',
-  'email': 'jane.smith@example.com'},
+  'email': 'jane.smith@example.com',
+  'id': 1},
  {'firstname': 'Alice',
   'lastname': 'Johnson',
   'phone': '555-8765',
-  'email': 'alice.johnson@example.com'},
+  'email': 'alice.johnson@example.com',
+  'id': 2},
  {'firstname': 'Bob',
   'lastname': 'Williams',
   'phone': '555-4321',
-  'email': 'bob.williams@example.com'},
+  'email': 'bob.williams@example.com',
+  'id': 3},
  {'firstname': 'Charlie',
   'lastname': 'Brown',
   'phone': '555-9876',
-  'email': 'charlie.brown@example.com'},
+  'email': 'charlie.brown@example.com',
+  'id': 4},
  {'firstname': 'Diana',
   'lastname': 'Miller',
   'phone': '555-6543',
-  'email': 'diana.miller@example.com'},
+  'email': 'diana.miller@example.com',
+  'id': 5},
  {'firstname': 'Edward',
   'lastname': 'Davis',
   'phone': '555-3456',
-  'email': 'edward.davis@example.com'},
+  'email': 'edward.davis@example.com',
+  'id': 6},
  {'firstname': 'Fiona',
   'lastname': 'Garcia',
   'phone': '555-6789',
-  'email': 'fiona.garcia@example.com'},
+  'email': 'fiona.garcia@example.com',
+  'id': 7},
  {'firstname': 'George',
   'lastname': 'Martinez',
   'phone': '555-7890',
-  'email': 'george.martinez@example.com'},
+  'email': 'george.martinez@example.com',
+  'id': 8},
  {'firstname': 'Hannah',
   'lastname': 'Rodriguez',
   'phone': '555-8901',
-  'email': 'hannah.rodriguez@example.com'}]</code></pre>
-</div>
-</div>
-<div id="cell-6" class="cell" data-execution_count="79">
-<div class="sourceCode cell-code" id="cb8"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb8-1"><a href="#cb8-1" aria-hidden="true" tabindex="-1"></a>q <span class="op">=</span> <span class="st">'1234'</span></span>
-<span id="cb8-2"><a href="#cb8-2" aria-hidden="true" tabindex="-1"></a><span class="co"># db[db['firstname'].str.lower().str.contains(q)]</span></span>
-<span id="cb8-3"><a href="#cb8-3" aria-hidden="true" tabindex="-1"></a>predicate_firstname <span class="op">=</span> db[<span class="st">'firstname'</span>].<span class="bu">str</span>.lower().<span class="bu">str</span>.contains(q.lower())</span>
-<span id="cb8-4"><a href="#cb8-4" aria-hidden="true" tabindex="-1"></a>predicate_lastname <span class="op">=</span> db[<span class="st">'lastname'</span>].<span class="bu">str</span>.lower().<span class="bu">str</span>.contains(q.lower())</span>
-<span id="cb8-5"><a href="#cb8-5" aria-hidden="true" tabindex="-1"></a>predicate_phone <span class="op">=</span> db[<span class="st">'phone'</span>].<span class="bu">str</span>.lower().<span class="bu">str</span>.contains(q.lower())</span>
-<span id="cb8-6"><a href="#cb8-6" aria-hidden="true" tabindex="-1"></a>predicate_email<span class="op">=</span> db[<span class="st">'email'</span>].<span class="bu">str</span>.lower().<span class="bu">str</span>.contains(q.lower())</span>
-<span id="cb8-7"><a href="#cb8-7" aria-hidden="true" tabindex="-1"></a>db[predicate_firstname<span class="op">|</span>predicate_lastname<span class="op">|</span>predicate_phone<span class="op">|</span>predicate_email]</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
-<div class="cell-output cell-output-display" data-execution_count="79">
+  'email': 'hannah.rodriguez@example.com',
+  'id': 9}]</code></pre>
+</div>
+</div>
+<div id="cell-6" class="cell" data-execution_count="5">
+<div class="sourceCode cell-code" id="cb5"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true" tabindex="-1"></a>q <span class="op">=</span> <span class="st">'1234'</span></span>
+<span id="cb5-2"><a href="#cb5-2" aria-hidden="true" tabindex="-1"></a><span class="co"># db[db['firstname'].str.lower().str.contains(q)]</span></span>
+<span id="cb5-3"><a href="#cb5-3" aria-hidden="true" tabindex="-1"></a>predicate_firstname <span class="op">=</span> db[<span class="st">'firstname'</span>].<span class="bu">str</span>.lower().<span class="bu">str</span>.contains(q.lower())</span>
+<span id="cb5-4"><a href="#cb5-4" aria-hidden="true" tabindex="-1"></a>predicate_lastname <span class="op">=</span> db[<span class="st">'lastname'</span>].<span class="bu">str</span>.lower().<span class="bu">str</span>.contains(q.lower())</span>
+<span id="cb5-5"><a href="#cb5-5" aria-hidden="true" tabindex="-1"></a>predicate_phone <span class="op">=</span> db[<span class="st">'phone'</span>].<span class="bu">str</span>.lower().<span class="bu">str</span>.contains(q.lower())</span>
+<span id="cb5-6"><a href="#cb5-6" aria-hidden="true" tabindex="-1"></a>predicate_email<span class="op">=</span> db[<span class="st">'email'</span>].<span class="bu">str</span>.lower().<span class="bu">str</span>.contains(q.lower())</span>
+<span id="cb5-7"><a href="#cb5-7" aria-hidden="true" tabindex="-1"></a>db[predicate_firstname<span class="op">|</span>predicate_lastname<span class="op">|</span>predicate_phone<span class="op">|</span>predicate_email]</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+<div class="cell-output cell-output-display" data-execution_count="5">
 <div>
 <div>
 
@@ -352,6 +353,7 @@ pre > code.sourceCode > span > a:first-child::before { text-decoration: underlin
 <th data-quarto-table-cell-role="th">lastname</th>
 <th data-quarto-table-cell-role="th">phone</th>
 <th data-quarto-table-cell-role="th">email</th>
+<th data-quarto-table-cell-role="th">id</th>
 </tr>
 </thead>
 <tbody>
@@ -361,6 +363,133 @@ pre > code.sourceCode > span > a:first-child::before { text-decoration: underlin
 <td>Doe</td>
 <td>555-1234</td>
 <td>john.doe@example.com</td>
+<td>0</td>
+</tr>
+</tbody>
+</table>
+
+</div>
+</div>
+</div>
+</div>
+<div id="cell-7" class="cell" data-execution_count="6">
+<div class="sourceCode cell-code" id="cb6"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb6-1"><a href="#cb6-1" aria-hidden="true" tabindex="-1"></a>db.columns</span>
+<span id="cb6-2"><a href="#cb6-2" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb6-3"><a href="#cb6-3" aria-hidden="true" tabindex="-1"></a>a<span class="op">=</span>{<span class="st">'firstname'</span>: <span class="st">'Rahul'</span>,</span>
+<span id="cb6-4"><a href="#cb6-4" aria-hidden="true" tabindex="-1"></a>   <span class="st">'lastname'</span>: <span class="st">'Saraf'</span>,</span>
+<span id="cb6-5"><a href="#cb6-5" aria-hidden="true" tabindex="-1"></a>    <span class="st">'phone'</span>:<span class="st">'7347306799'</span>,</span>
+<span id="cb6-6"><a href="#cb6-6" aria-hidden="true" tabindex="-1"></a>    <span class="st">'email'</span>: <span class="st">'rahuketu86'</span>}</span>
+<span id="cb6-7"><a href="#cb6-7" aria-hidden="true" tabindex="-1"></a>a[<span class="st">'id'</span>] <span class="op">=</span> <span class="bu">len</span>(db)</span>
+<span id="cb6-8"><a href="#cb6-8" aria-hidden="true" tabindex="-1"></a><span class="co"># db.loc[len(db)] = </span></span>
+<span id="cb6-9"><a href="#cb6-9" aria-hidden="true" tabindex="-1"></a>a</span>
+<span id="cb6-10"><a href="#cb6-10" aria-hidden="true" tabindex="-1"></a>db.loc[<span class="bu">len</span>(db), a.keys()] <span class="op">=</span> a.values()</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+</div>
+<div id="cell-8" class="cell" data-execution_count="7">
+<div class="sourceCode cell-code" id="cb7"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb7-1"><a href="#cb7-1" aria-hidden="true" tabindex="-1"></a>db</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+<div class="cell-output cell-output-display" data-execution_count="7">
+<div>
+<div>
+
+
+<table class="dataframe table table-sm table-striped small" data-quarto-postprocess="true" data-border="1">
+<thead>
+<tr class="header">
+<th data-quarto-table-cell-role="th"></th>
+<th data-quarto-table-cell-role="th">firstname</th>
+<th data-quarto-table-cell-role="th">lastname</th>
+<th data-quarto-table-cell-role="th">phone</th>
+<th data-quarto-table-cell-role="th">email</th>
+<th data-quarto-table-cell-role="th">id</th>
+</tr>
+</thead>
+<tbody>
+<tr class="odd">
+<td data-quarto-table-cell-role="th">0</td>
+<td>John</td>
+<td>Doe</td>
+<td>555-1234</td>
+<td>john.doe@example.com</td>
+<td>0.0</td>
+</tr>
+<tr class="even">
+<td data-quarto-table-cell-role="th">1</td>
+<td>Jane</td>
+<td>Smith</td>
+<td>555-5678</td>
+<td>jane.smith@example.com</td>
+<td>1.0</td>
+</tr>
+<tr class="odd">
+<td data-quarto-table-cell-role="th">2</td>
+<td>Alice</td>
+<td>Johnson</td>
+<td>555-8765</td>
+<td>alice.johnson@example.com</td>
+<td>2.0</td>
+</tr>
+<tr class="even">
+<td data-quarto-table-cell-role="th">3</td>
+<td>Bob</td>
+<td>Williams</td>
+<td>555-4321</td>
+<td>bob.williams@example.com</td>
+<td>3.0</td>
+</tr>
+<tr class="odd">
+<td data-quarto-table-cell-role="th">4</td>
+<td>Charlie</td>
+<td>Brown</td>
+<td>555-9876</td>
+<td>charlie.brown@example.com</td>
+<td>4.0</td>
+</tr>
+<tr class="even">
+<td data-quarto-table-cell-role="th">5</td>
+<td>Diana</td>
+<td>Miller</td>
+<td>555-6543</td>
+<td>diana.miller@example.com</td>
+<td>5.0</td>
+</tr>
+<tr class="odd">
+<td data-quarto-table-cell-role="th">6</td>
+<td>Edward</td>
+<td>Davis</td>
+<td>555-3456</td>
+<td>edward.davis@example.com</td>
+<td>6.0</td>
+</tr>
+<tr class="even">
+<td data-quarto-table-cell-role="th">7</td>
+<td>Fiona</td>
+<td>Garcia</td>
+<td>555-6789</td>
+<td>fiona.garcia@example.com</td>
+<td>7.0</td>
+</tr>
+<tr class="odd">
+<td data-quarto-table-cell-role="th">8</td>
+<td>George</td>
+<td>Martinez</td>
+<td>555-7890</td>
+<td>george.martinez@example.com</td>
+<td>8.0</td>
+</tr>
+<tr class="even">
+<td data-quarto-table-cell-role="th">9</td>
+<td>Hannah</td>
+<td>Rodriguez</td>
+<td>555-8901</td>
+<td>hannah.rodriguez@example.com</td>
+<td>9.0</td>
+</tr>
+<tr class="odd">
+<td data-quarto-table-cell-role="th">10</td>
+<td>Rahul</td>
+<td>Saraf</td>
+<td>7347306799</td>
+<td>rahuketu86</td>
+<td>10.0</td>
 </tr>
 </tbody>
 </table>
@@ -369,43 +498,225 @@ pre > code.sourceCode > span > a:first-child::before { text-decoration: underlin
 </div>
 </div>
 </div>
-<div id="cell-7" class="cell" data-execution_count="80">
-<div class="sourceCode cell-code" id="cb9"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb9-1"><a href="#cb9-1" aria-hidden="true" tabindex="-1"></a><span class="kw">class</span> Contact(<span class="bu">object</span>):</span>
-<span id="cb9-2"><a href="#cb9-2" aria-hidden="true" tabindex="-1"></a>    <span class="kw">def</span> <span class="fu">__init__</span>(<span class="va">self</span>) <span class="op">-&gt;</span> <span class="va">None</span>:</span>
-<span id="cb9-3"><a href="#cb9-3" aria-hidden="true" tabindex="-1"></a>        <span class="va">self</span>.db <span class="op">=</span> pd.read_json(<span class="st">'contactdb.json'</span>)</span>
-<span id="cb9-4"><a href="#cb9-4" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb9-5"><a href="#cb9-5" aria-hidden="true" tabindex="-1"></a>    <span class="kw">def</span> search(<span class="va">self</span>, q):</span>
-<span id="cb9-6"><a href="#cb9-6" aria-hidden="true" tabindex="-1"></a>        predicate_firstname <span class="op">=</span> <span class="va">self</span>.db[<span class="st">'firstname'</span>].<span class="bu">str</span>.lower().<span class="bu">str</span>.contains(q.lower())</span>
-<span id="cb9-7"><a href="#cb9-7" aria-hidden="true" tabindex="-1"></a>        predicate_lastname <span class="op">=</span> <span class="va">self</span>.db[<span class="st">'lastname'</span>].<span class="bu">str</span>.lower().<span class="bu">str</span>.contains(q.lower())</span>
-<span id="cb9-8"><a href="#cb9-8" aria-hidden="true" tabindex="-1"></a>        predicate_phone <span class="op">=</span> <span class="va">self</span>.db[<span class="st">'phone'</span>].<span class="bu">str</span>.lower().<span class="bu">str</span>.contains(q.lower())</span>
-<span id="cb9-9"><a href="#cb9-9" aria-hidden="true" tabindex="-1"></a>        predicate_email<span class="op">=</span> <span class="va">self</span>.db[<span class="st">'email'</span>].<span class="bu">str</span>.lower().<span class="bu">str</span>.contains(q.lower())</span>
-<span id="cb9-10"><a href="#cb9-10" aria-hidden="true" tabindex="-1"></a>        filter_df <span class="op">=</span> <span class="va">self</span>.db[predicate_firstname<span class="op">|</span>predicate_lastname<span class="op">|</span>predicate_phone<span class="op">|</span>predicate_email]</span>
-<span id="cb9-11"><a href="#cb9-11" aria-hidden="true" tabindex="-1"></a>        <span class="cf">return</span> filter_df.to_dict(<span class="st">'records'</span>)</span>
-<span id="cb9-12"><a href="#cb9-12" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb9-13"><a href="#cb9-13" aria-hidden="true" tabindex="-1"></a>    <span class="kw">def</span> <span class="bu">all</span>(<span class="va">self</span>):</span>
-<span id="cb9-14"><a href="#cb9-14" aria-hidden="true" tabindex="-1"></a>        <span class="cf">return</span> <span class="va">self</span>.db.to_dict(<span class="st">'records'</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
-</div>
-<div id="cell-8" class="cell" data-execution_count="81">
-<div class="sourceCode cell-code" id="cb10"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb10-1"><a href="#cb10-1" aria-hidden="true" tabindex="-1"></a>app <span class="op">=</span> Flask(<span class="va">__name__</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
-</div>
-<div id="cell-9" class="cell" data-execution_count="82">
-<div class="sourceCode cell-code" id="cb11"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb11-1"><a href="#cb11-1" aria-hidden="true" tabindex="-1"></a><span class="at">@app.get</span>(<span class="st">"/"</span>)</span>
-<span id="cb11-2"><a href="#cb11-2" aria-hidden="true" tabindex="-1"></a><span class="kw">def</span> index():</span>
-<span id="cb11-3"><a href="#cb11-3" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> redirect(<span class="st">"/contacts"</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
-</div>
-<div id="cell-10" class="cell" data-execution_count="83">
-<div class="sourceCode cell-code" id="cb12"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb12-1"><a href="#cb12-1" aria-hidden="true" tabindex="-1"></a><span class="at">@app.get</span>(<span class="st">"/contacts"</span>)</span>
-<span id="cb12-2"><a href="#cb12-2" aria-hidden="true" tabindex="-1"></a><span class="kw">def</span> contacts():</span>
-<span id="cb12-3"><a href="#cb12-3" aria-hidden="true" tabindex="-1"></a>    search <span class="op">=</span> request.args.get(<span class="st">"q"</span>)</span>
-<span id="cb12-4"><a href="#cb12-4" aria-hidden="true" tabindex="-1"></a>    contact_set <span class="op">=</span> <span class="va">None</span></span>
-<span id="cb12-5"><a href="#cb12-5" aria-hidden="true" tabindex="-1"></a>    <span class="cf">if</span> search <span class="kw">is</span> <span class="kw">not</span> <span class="va">None</span>: contact_set <span class="op">=</span> Contact().search(search)</span>
-<span id="cb12-6"><a href="#cb12-6" aria-hidden="true" tabindex="-1"></a>    <span class="cf">else</span>: contact_set <span class="op">=</span> Contact().<span class="bu">all</span>()</span>
-<span id="cb12-7"><a href="#cb12-7" aria-hidden="true" tabindex="-1"></a>    <span class="co"># print(contact_set)</span></span>
-<span id="cb12-8"><a href="#cb12-8" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> render_template(<span class="st">"index.html"</span>, contact_set<span class="op">=</span>contact_set)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
-</div>
-<div id="cell-11" class="cell" data-execution_count="84">
-<div class="sourceCode cell-code" id="cb13"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb13-1"><a href="#cb13-1" aria-hidden="true" tabindex="-1"></a><span class="im">from</span> nbdev.export <span class="im">import</span> nb_export</span>
-<span id="cb13-2"><a href="#cb13-2" aria-hidden="true" tabindex="-1"></a>nb_export(<span class="st">"01_main.ipynb"</span>, lib_path<span class="op">=</span><span class="st">"."</span>, name<span class="op">=</span><span class="st">'main'</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+<div id="cell-9" class="cell" data-execution_count="8">
+<div class="sourceCode cell-code" id="cb8"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb8-1"><a href="#cb8-1" aria-hidden="true" tabindex="-1"></a><span class="kw">class</span> Contact(<span class="bu">object</span>):</span>
+<span id="cb8-2"><a href="#cb8-2" aria-hidden="true" tabindex="-1"></a>    <span class="kw">def</span> <span class="fu">__init__</span>(<span class="va">self</span>) <span class="op">-&gt;</span> <span class="va">None</span>:</span>
+<span id="cb8-3"><a href="#cb8-3" aria-hidden="true" tabindex="-1"></a>        <span class="va">self</span>.refresh()</span>
+<span id="cb8-4"><a href="#cb8-4" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb8-5"><a href="#cb8-5" aria-hidden="true" tabindex="-1"></a>    <span class="kw">def</span> search(<span class="va">self</span>, q):</span>
+<span id="cb8-6"><a href="#cb8-6" aria-hidden="true" tabindex="-1"></a>        predicate_firstname <span class="op">=</span> <span class="va">self</span>.db[<span class="st">'firstname'</span>].<span class="bu">str</span>.lower().<span class="bu">str</span>.contains(q.lower())</span>
+<span id="cb8-7"><a href="#cb8-7" aria-hidden="true" tabindex="-1"></a>        predicate_lastname <span class="op">=</span> <span class="va">self</span>.db[<span class="st">'lastname'</span>].<span class="bu">str</span>.lower().<span class="bu">str</span>.contains(q.lower())</span>
+<span id="cb8-8"><a href="#cb8-8" aria-hidden="true" tabindex="-1"></a>        predicate_phone <span class="op">=</span> <span class="va">self</span>.db[<span class="st">'phone'</span>].<span class="bu">str</span>.lower().<span class="bu">str</span>.contains(q.lower())</span>
+<span id="cb8-9"><a href="#cb8-9" aria-hidden="true" tabindex="-1"></a>        predicate_email<span class="op">=</span> <span class="va">self</span>.db[<span class="st">'email'</span>].<span class="bu">str</span>.lower().<span class="bu">str</span>.contains(q.lower())</span>
+<span id="cb8-10"><a href="#cb8-10" aria-hidden="true" tabindex="-1"></a>        filter_df <span class="op">=</span> <span class="va">self</span>.db[predicate_firstname<span class="op">|</span>predicate_lastname<span class="op">|</span>predicate_phone<span class="op">|</span>predicate_email]</span>
+<span id="cb8-11"><a href="#cb8-11" aria-hidden="true" tabindex="-1"></a>        <span class="cf">return</span> filter_df.to_dict(<span class="st">'records'</span>)</span>
+<span id="cb8-12"><a href="#cb8-12" aria-hidden="true" tabindex="-1"></a>    </span>
+<span id="cb8-13"><a href="#cb8-13" aria-hidden="true" tabindex="-1"></a>    <span class="kw">def</span> refresh(<span class="va">self</span>):</span>
+<span id="cb8-14"><a href="#cb8-14" aria-hidden="true" tabindex="-1"></a>        <span class="va">self</span>.file_path <span class="op">=</span> <span class="st">'contactdb.json'</span></span>
+<span id="cb8-15"><a href="#cb8-15" aria-hidden="true" tabindex="-1"></a>        <span class="va">self</span>.db <span class="op">=</span> pd.read_json(<span class="va">self</span>.file_path)</span>
+<span id="cb8-16"><a href="#cb8-16" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb8-17"><a href="#cb8-17" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb8-18"><a href="#cb8-18" aria-hidden="true" tabindex="-1"></a>    <span class="kw">def</span> <span class="bu">all</span>(<span class="va">self</span>):</span>
+<span id="cb8-19"><a href="#cb8-19" aria-hidden="true" tabindex="-1"></a>        <span class="cf">return</span> <span class="va">self</span>.db.to_dict(<span class="st">'records'</span>)</span>
+<span id="cb8-20"><a href="#cb8-20" aria-hidden="true" tabindex="-1"></a>    </span>
+<span id="cb8-21"><a href="#cb8-21" aria-hidden="true" tabindex="-1"></a>    <span class="kw">def</span> get(<span class="va">self</span>, <span class="bu">id</span>):</span>
+<span id="cb8-22"><a href="#cb8-22" aria-hidden="true" tabindex="-1"></a>        contact <span class="op">=</span> <span class="va">self</span>.db[<span class="va">self</span>.db[<span class="st">'id'</span>]<span class="op">==</span><span class="bu">id</span>]</span>
+<span id="cb8-23"><a href="#cb8-23" aria-hidden="true" tabindex="-1"></a>        <span class="co"># print(contact)</span></span>
+<span id="cb8-24"><a href="#cb8-24" aria-hidden="true" tabindex="-1"></a>        <span class="cf">return</span> contact.to_dict(<span class="st">'records'</span>)[<span class="dv">0</span>]</span>
+<span id="cb8-25"><a href="#cb8-25" aria-hidden="true" tabindex="-1"></a>    </span>
+<span id="cb8-26"><a href="#cb8-26" aria-hidden="true" tabindex="-1"></a>    <span class="kw">def</span> add(<span class="va">self</span>, firstname, lastname, phone, email):</span>
+<span id="cb8-27"><a href="#cb8-27" aria-hidden="true" tabindex="-1"></a>        a<span class="op">=</span>{<span class="st">'firstname'</span>: firstname,</span>
+<span id="cb8-28"><a href="#cb8-28" aria-hidden="true" tabindex="-1"></a>           <span class="st">'lastname'</span>: lastname,</span>
+<span id="cb8-29"><a href="#cb8-29" aria-hidden="true" tabindex="-1"></a>           <span class="st">'phone'</span>:phone,</span>
+<span id="cb8-30"><a href="#cb8-30" aria-hidden="true" tabindex="-1"></a>           <span class="st">'email'</span>: email}</span>
+<span id="cb8-31"><a href="#cb8-31" aria-hidden="true" tabindex="-1"></a>        a[<span class="st">'id'</span>] <span class="op">=</span> <span class="bu">len</span>(<span class="va">self</span>.db)</span>
+<span id="cb8-32"><a href="#cb8-32" aria-hidden="true" tabindex="-1"></a>        <span class="va">self</span>.db.loc[<span class="bu">len</span>(<span class="va">self</span>.db), a.keys()] <span class="op">=</span> a.values()</span>
+<span id="cb8-33"><a href="#cb8-33" aria-hidden="true" tabindex="-1"></a>        <span class="va">self</span>.db.to_json(file_path, orient<span class="op">=</span><span class="st">'records'</span>)</span>
+<span id="cb8-34"><a href="#cb8-34" aria-hidden="true" tabindex="-1"></a>        <span class="va">self</span>.refresh()</span>
+<span id="cb8-35"><a href="#cb8-35" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb8-36"><a href="#cb8-36" aria-hidden="true" tabindex="-1"></a>    <span class="kw">def</span> delete(<span class="va">self</span>, <span class="bu">id</span>):</span>
+<span id="cb8-37"><a href="#cb8-37" aria-hidden="true" tabindex="-1"></a>        <span class="va">self</span>.db.drop(index<span class="op">=</span><span class="bu">id</span>, inplace<span class="op">=</span><span class="va">True</span>, errors<span class="op">=</span><span class="st">'raise'</span>)</span>
+<span id="cb8-38"><a href="#cb8-38" aria-hidden="true" tabindex="-1"></a>        <span class="va">self</span>.db.to_json(file_path, orient<span class="op">=</span><span class="st">'records'</span>)</span>
+<span id="cb8-39"><a href="#cb8-39" aria-hidden="true" tabindex="-1"></a>        <span class="va">self</span>.refresh()</span>
+<span id="cb8-40"><a href="#cb8-40" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb8-41"><a href="#cb8-41" aria-hidden="true" tabindex="-1"></a>    <span class="kw">def</span> edit(<span class="va">self</span>, <span class="bu">id</span>, firstname, lastname, phone, email):</span>
+<span id="cb8-42"><a href="#cb8-42" aria-hidden="true" tabindex="-1"></a>        a<span class="op">=</span>{<span class="st">'firstname'</span>: firstname,</span>
+<span id="cb8-43"><a href="#cb8-43" aria-hidden="true" tabindex="-1"></a>           <span class="st">'lastname'</span>: lastname,</span>
+<span id="cb8-44"><a href="#cb8-44" aria-hidden="true" tabindex="-1"></a>           <span class="st">'phone'</span>:phone,</span>
+<span id="cb8-45"><a href="#cb8-45" aria-hidden="true" tabindex="-1"></a>           <span class="st">'email'</span>: email,</span>
+<span id="cb8-46"><a href="#cb8-46" aria-hidden="true" tabindex="-1"></a>           <span class="st">'id'</span>: <span class="bu">id</span>}</span>
+<span id="cb8-47"><a href="#cb8-47" aria-hidden="true" tabindex="-1"></a>        <span class="va">self</span>.db.loc[<span class="bu">id</span>, a.keys()] <span class="op">=</span> a.values()</span>
+<span id="cb8-48"><a href="#cb8-48" aria-hidden="true" tabindex="-1"></a>        <span class="va">self</span>.db.to_json(file_path, orient<span class="op">=</span><span class="st">'records'</span>)</span>
+<span id="cb8-49"><a href="#cb8-49" aria-hidden="true" tabindex="-1"></a>        <span class="va">self</span>.refresh()</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+</div>
+<div id="cell-10" class="cell" data-execution_count="10">
+<div class="sourceCode cell-code" id="cb9"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb9-1"><a href="#cb9-1" aria-hidden="true" tabindex="-1"></a>c <span class="op">=</span> Contact()</span>
+<span id="cb9-2"><a href="#cb9-2" aria-hidden="true" tabindex="-1"></a>c.db.loc[<span class="dv">2</span>].to_dict().values()</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+<div class="cell-output cell-output-display" data-execution_count="10">
+<pre><code>dict_values(['Alice', 'Johnson', '555-8765', 'alice.johnson@example.com', 2])</code></pre>
+</div>
+</div>
+<div id="cell-11" class="cell" data-execution_count="11">
+<div class="sourceCode cell-code" id="cb11"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb11-1"><a href="#cb11-1" aria-hidden="true" tabindex="-1"></a>new_vals <span class="op">=</span> [<span class="dv">2</span>, <span class="st">'Alice'</span>, <span class="st">'Johnson'</span>, <span class="st">'555-8767'</span>, <span class="st">'alice.johnson@example.com'</span>]</span>
+<span id="cb11-2"><a href="#cb11-2" aria-hidden="true" tabindex="-1"></a>c.edit(<span class="op">*</span>new_vals)</span>
+<span id="cb11-3"><a href="#cb11-3" aria-hidden="true" tabindex="-1"></a>c.get(<span class="dv">2</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+<div class="cell-output cell-output-display" data-execution_count="11">
+<pre><code>{'firstname': 'Alice',
+ 'lastname': 'Johnson',
+ 'phone': '555-8767',
+ 'email': 'alice.johnson@example.com',
+ 'id': 2}</code></pre>
+</div>
+</div>
+<div id="cell-12" class="cell" data-execution_count="13">
+<div class="sourceCode cell-code" id="cb13"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb13-1"><a href="#cb13-1" aria-hidden="true" tabindex="-1"></a>c <span class="op">=</span> Contact()</span>
+<span id="cb13-2"><a href="#cb13-2" aria-hidden="true" tabindex="-1"></a>a_dict <span class="op">=</span> c.db.loc[<span class="dv">0</span>].to_dict()</span>
+<span id="cb13-3"><a href="#cb13-3" aria-hidden="true" tabindex="-1"></a>a_dict.pop(<span class="st">'id'</span>, <span class="va">None</span>)<span class="op">;</span> a_dict</span>
+<span id="cb13-4"><a href="#cb13-4" aria-hidden="true" tabindex="-1"></a>c.delete(<span class="dv">0</span>)</span>
+<span id="cb13-5"><a href="#cb13-5" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb13-6"><a href="#cb13-6" aria-hidden="true" tabindex="-1"></a>c.add(<span class="op">*</span><span class="bu">list</span>(a_dict.values()))</span>
+<span id="cb13-7"><a href="#cb13-7" aria-hidden="true" tabindex="-1"></a>c.<span class="bu">all</span>()</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+<div class="cell-output cell-output-display" data-execution_count="13">
+<pre><code>[{'firstname': 'Alice',
+  'lastname': 'Johnson',
+  'phone': '555-8767',
+  'email': 'alice.johnson@example.com',
+  'id': 2},
+ {'firstname': 'Bob',
+  'lastname': 'Williams',
+  'phone': '555-4321',
+  'email': 'bob.williams@example.com',
+  'id': 3},
+ {'firstname': 'Charlie',
+  'lastname': 'Brown',
+  'phone': '555-9876',
+  'email': 'charlie.brown@example.com',
+  'id': 4},
+ {'firstname': 'Diana',
+  'lastname': 'Miller',
+  'phone': '555-6543',
+  'email': 'diana.miller@example.com',
+  'id': 5},
+ {'firstname': 'Edward',
+  'lastname': 'Davis',
+  'phone': '555-3456',
+  'email': 'edward.davis@example.com',
+  'id': 6},
+ {'firstname': 'Fiona',
+  'lastname': 'Garcia',
+  'phone': '555-6789',
+  'email': 'fiona.garcia@example.com',
+  'id': 7},
+ {'firstname': 'George',
+  'lastname': 'Martinez',
+  'phone': '555-7890',
+  'email': 'george.martinez@example.com',
+  'id': 8},
+ {'firstname': 'Hannah',
+  'lastname': 'Rodriguez',
+  'phone': '555-8901',
+  'email': 'hannah.rodriguez@example.com',
+  'id': 9},
+ {'firstname': 'John',
+  'lastname': 'Doe',
+  'phone': '555-1234',
+  'email': 'john.doe@example.com',
+  'id': 9},
+ {'firstname': 'Jane',
+  'lastname': 'Smith',
+  'phone': '555-5678',
+  'email': 'jane.smith@example.com',
+  'id': 9}]</code></pre>
+</div>
+</div>
+<div id="cell-13" class="cell" data-execution_count="14">
+<div class="sourceCode cell-code" id="cb15"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb15-1"><a href="#cb15-1" aria-hidden="true" tabindex="-1"></a>app <span class="op">=</span> Flask(<span class="va">__name__</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+</div>
+<div id="cell-14" class="cell" data-execution_count="15">
+<div class="sourceCode cell-code" id="cb16"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb16-1"><a href="#cb16-1" aria-hidden="true" tabindex="-1"></a><span class="at">@app.get</span>(<span class="st">"/"</span>)</span>
+<span id="cb16-2"><a href="#cb16-2" aria-hidden="true" tabindex="-1"></a><span class="kw">def</span> index():</span>
+<span id="cb16-3"><a href="#cb16-3" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> redirect(<span class="st">"/contacts"</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+</div>
+<div id="cell-15" class="cell" data-execution_count="16">
+<div class="sourceCode cell-code" id="cb17"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb17-1"><a href="#cb17-1" aria-hidden="true" tabindex="-1"></a><span class="at">@app.get</span>(<span class="st">"/contacts"</span>)</span>
+<span id="cb17-2"><a href="#cb17-2" aria-hidden="true" tabindex="-1"></a><span class="kw">def</span> contacts():</span>
+<span id="cb17-3"><a href="#cb17-3" aria-hidden="true" tabindex="-1"></a>    search <span class="op">=</span> request.args.get(<span class="st">"q"</span>)</span>
+<span id="cb17-4"><a href="#cb17-4" aria-hidden="true" tabindex="-1"></a>    contact_set <span class="op">=</span> <span class="va">None</span></span>
+<span id="cb17-5"><a href="#cb17-5" aria-hidden="true" tabindex="-1"></a>    <span class="cf">if</span> search <span class="kw">is</span> <span class="kw">not</span> <span class="va">None</span>: contact_set <span class="op">=</span> Contact().search(search)</span>
+<span id="cb17-6"><a href="#cb17-6" aria-hidden="true" tabindex="-1"></a>    <span class="cf">else</span>: contact_set <span class="op">=</span> Contact().<span class="bu">all</span>()</span>
+<span id="cb17-7"><a href="#cb17-7" aria-hidden="true" tabindex="-1"></a>    <span class="co"># print(contact_set)</span></span>
+<span id="cb17-8"><a href="#cb17-8" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> render_template(<span class="st">"index.html"</span>, contact_set<span class="op">=</span>contact_set)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+</div>
+<div id="cell-16" class="cell" data-execution_count="17">
+<div class="sourceCode cell-code" id="cb18"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb18-1"><a href="#cb18-1" aria-hidden="true" tabindex="-1"></a>Contact().db[df[<span class="st">'id'</span>]<span class="op">==</span><span class="dv">1</span>].to_dict(<span class="st">'records'</span>)[<span class="dv">0</span>]</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+<div class="cell-output cell-output-display" data-execution_count="17">
+<pre><code>{'firstname': 'Bob',
+ 'lastname': 'Williams',
+ 'phone': '555-4321',
+ 'email': 'bob.williams@example.com',
+ 'id': 3}</code></pre>
+</div>
+</div>
+<div id="cell-17" class="cell" data-execution_count="18">
+<div class="sourceCode cell-code" id="cb20"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb20-1"><a href="#cb20-1" aria-hidden="true" tabindex="-1"></a><span class="at">@app.get</span>(<span class="st">"/contacts/&lt;int:id&gt;"</span>)</span>
+<span id="cb20-2"><a href="#cb20-2" aria-hidden="true" tabindex="-1"></a><span class="kw">def</span> view(<span class="bu">id</span>:<span class="bu">int</span>):</span>
+<span id="cb20-3"><a href="#cb20-3" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> render_template(<span class="st">"view.html"</span>, contact<span class="op">=</span>Contact().get(<span class="bu">id</span>))</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+</div>
+<div id="cell-18" class="cell" data-execution_count="19">
+<div class="sourceCode cell-code" id="cb21"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb21-1"><a href="#cb21-1" aria-hidden="true" tabindex="-1"></a><span class="cf">with</span> app.app_context():</span>
+<span id="cb21-2"><a href="#cb21-2" aria-hidden="true" tabindex="-1"></a>    <span class="bu">print</span>(view(<span class="dv">2</span>))</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+<div class="cell-output cell-output-stdout">
+<pre><code>&lt;!doctype html&gt;
+&lt;html&gt;
+    &lt;head&gt;
+        &lt;title&gt;Contact.App&lt;/title&gt;
+        &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"&gt;
+    &lt;/head&gt;
+    &lt;body&gt;
+        &lt;main class="container"&gt;
+            &lt;h1&gt; CONTACTS.APP&lt;/h1&gt;
+            &lt;h2&gt; A demo contact application &lt;/h2&gt;
+            &lt;hr&gt;
+            
+    &lt;article&gt;
+        &lt;h1&gt;Alice Johnson &lt;/h1&gt;
+        &lt;div role="group"&gt;
+            &lt;div&gt;555-8767&lt;/div&gt;
+            &lt;div&gt;alice.johnson@example.com&lt;/div&gt;
+        &lt;/div&gt;
+        &lt;footer&gt;
+            &lt;a href="/contacts" role="button"&gt;Back&lt;/a&gt;
+        &lt;/footer&gt;
+    &lt;/article&gt;
+
+        &lt;/main&gt;
+    &lt;/body&gt;
+&lt;/html&gt;</code></pre>
+</div>
+</div>
+<div id="cell-19" class="cell" data-execution_count="20">
+<div class="sourceCode cell-code" id="cb23"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb23-1"><a href="#cb23-1" aria-hidden="true" tabindex="-1"></a>Contact().get(<span class="dv">2</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+<div class="cell-output cell-output-display" data-execution_count="20">
+<pre><code>{'firstname': 'Alice',
+ 'lastname': 'Johnson',
+ 'phone': '555-8767',
+ 'email': 'alice.johnson@example.com',
+ 'id': 2}</code></pre>
+</div>
+</div>
+<div id="cell-20" class="cell" data-execution_count="21">
+<div class="sourceCode cell-code" id="cb25"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb25-1"><a href="#cb25-1" aria-hidden="true" tabindex="-1"></a><span class="at">@app.put</span>(<span class="st">"/contacts/&lt;int:id&gt;/edit"</span>)</span>
+<span id="cb25-2"><a href="#cb25-2" aria-hidden="true" tabindex="-1"></a><span class="kw">def</span> edit(<span class="bu">id</span>):</span>
+<span id="cb25-3"><a href="#cb25-3" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> <span class="st">"Edit View"</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+</div>
+<div id="cell-21" class="cell" data-execution_count="22">
+<div class="sourceCode cell-code" id="cb26"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb26-1"><a href="#cb26-1" aria-hidden="true" tabindex="-1"></a><span class="at">@app.post</span>(<span class="st">"/contacts/new"</span>)</span>
+<span id="cb26-2"><a href="#cb26-2" aria-hidden="true" tabindex="-1"></a><span class="kw">def</span> new():</span>
+<span id="cb26-3"><a href="#cb26-3" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> <span class="st">"New View"</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
+</div>
+<div id="cell-22" class="cell" data-execution_count="24">
+<div class="sourceCode cell-code" id="cb27"><pre class="sourceCode python code-with-copy"><code class="sourceCode python"><span id="cb27-1"><a href="#cb27-1" aria-hidden="true" tabindex="-1"></a><span class="im">from</span> nbdev.export <span class="im">import</span> nb_export</span>
+<span id="cb27-2"><a href="#cb27-2" aria-hidden="true" tabindex="-1"></a>nb_export(<span class="st">"01_main.ipynb"</span>, lib_path<span class="op">=</span><span class="st">"."</span>, name<span class="op">=</span><span class="st">'main'</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
 </div>
 
 

_site/search.json

@@ -4,7 +4,7 @@
     "href": "01_main.html",
     "title": "Main App",
     "section": "",
-    "text": "The autoreload extension is already loaded. To reload it, use:\n  %reload_ext autoreload\n\n\n\nimport pandas as pd\nfrom flask import Flask, redirect, request\nfrom flask import render_template\nimport json\n\n\npeople = [\n    {\n        \"firstname\": \"John\",\n        \"lastname\": \"Doe\",\n        \"phone\": \"555-1234\",\n        \"email\": \"john.doe@example.com\"\n    },\n    {\n        \"firstname\": \"Jane\",\n        \"lastname\": \"Smith\",\n        \"phone\": \"555-5678\",\n        \"email\": \"jane.smith@example.com\"\n    },\n    {\n        \"firstname\": \"Alice\",\n        \"lastname\": \"Johnson\",\n        \"phone\": \"555-8765\",\n        \"email\": \"alice.johnson@example.com\"\n    },\n    {\n        \"firstname\": \"Bob\",\n        \"lastname\": \"Williams\",\n        \"phone\": \"555-4321\",\n        \"email\": \"bob.williams@example.com\"\n    },\n    {\n        \"firstname\": \"Charlie\",\n        \"lastname\": \"Brown\",\n        \"phone\": \"555-9876\",\n        \"email\": \"charlie.brown@example.com\"\n    },\n    {\n        \"firstname\": \"Diana\",\n        \"lastname\": \"Miller\",\n        \"phone\": \"555-6543\",\n        \"email\": \"diana.miller@example.com\"\n    },\n    {\n        \"firstname\": \"Edward\",\n        \"lastname\": \"Davis\",\n        \"phone\": \"555-3456\",\n        \"email\": \"edward.davis@example.com\"\n    },\n    {\n        \"firstname\": \"Fiona\",\n        \"lastname\": \"Garcia\",\n        \"phone\": \"555-6789\",\n        \"email\": \"fiona.garcia@example.com\"\n    },\n    {\n        \"firstname\": \"George\",\n        \"lastname\": \"Martinez\",\n        \"phone\": \"555-7890\",\n        \"email\": \"george.martinez@example.com\"\n    },\n    {\n        \"firstname\": \"Hannah\",\n        \"lastname\": \"Rodriguez\",\n        \"phone\": \"555-8901\",\n        \"email\": \"hannah.rodriguez@example.com\"\n    }\n]\n\n# Writing the JSON data to a file\nfile_path = 'contactdb.json'\nwith open(file_path, 'w') as json_file:\n    json.dump(people, json_file, indent=4)\n\nfile_path\n\n'contactdb.json'\n\n\n\ndb = pd.read_json('contactdb.json')\ndb.to_dict('records')\n\n[{'firstname': 'John',\n  'lastname': 'Doe',\n  'phone': '555-1234',\n  'email': 'john.doe@example.com'},\n {'firstname': 'Jane',\n  'lastname': 'Smith',\n  'phone': '555-5678',\n  'email': 'jane.smith@example.com'},\n {'firstname': 'Alice',\n  'lastname': 'Johnson',\n  'phone': '555-8765',\n  'email': 'alice.johnson@example.com'},\n {'firstname': 'Bob',\n  'lastname': 'Williams',\n  'phone': '555-4321',\n  'email': 'bob.williams@example.com'},\n {'firstname': 'Charlie',\n  'lastname': 'Brown',\n  'phone': '555-9876',\n  'email': 'charlie.brown@example.com'},\n {'firstname': 'Diana',\n  'lastname': 'Miller',\n  'phone': '555-6543',\n  'email': 'diana.miller@example.com'},\n {'firstname': 'Edward',\n  'lastname': 'Davis',\n  'phone': '555-3456',\n  'email': 'edward.davis@example.com'},\n {'firstname': 'Fiona',\n  'lastname': 'Garcia',\n  'phone': '555-6789',\n  'email': 'fiona.garcia@example.com'},\n {'firstname': 'George',\n  'lastname': 'Martinez',\n  'phone': '555-7890',\n  'email': 'george.martinez@example.com'},\n {'firstname': 'Hannah',\n  'lastname': 'Rodriguez',\n  'phone': '555-8901',\n  'email': 'hannah.rodriguez@example.com'}]\n\n\n\nq = '1234'\n# db[db['firstname'].str.lower().str.contains(q)]\npredicate_firstname = db['firstname'].str.lower().str.contains(q.lower())\npredicate_lastname = db['lastname'].str.lower().str.contains(q.lower())\npredicate_phone = db['phone'].str.lower().str.contains(q.lower())\npredicate_email= db['email'].str.lower().str.contains(q.lower())\ndb[predicate_firstname|predicate_lastname|predicate_phone|predicate_email]\n\n\n\n\n\n\n\n\n\nfirstname\nlastname\nphone\nemail\n\n\n\n\n0\nJohn\nDoe\n555-1234\njohn.doe@example.com\n\n\n\n\n\n\n\n\n\nclass Contact(object):\n    def __init__(self) -> None:\n        self.db = pd.read_json('contactdb.json')\n\n    def search(self, q):\n        predicate_firstname = self.db['firstname'].str.lower().str.contains(q.lower())\n        predicate_lastname = self.db['lastname'].str.lower().str.contains(q.lower())\n        predicate_phone = self.db['phone'].str.lower().str.contains(q.lower())\n        predicate_email= self.db['email'].str.lower().str.contains(q.lower())\n        filter_df = self.db[predicate_firstname|predicate_lastname|predicate_phone|predicate_email]\n        return filter_df.to_dict('records')\n\n    def all(self):\n        return self.db.to_dict('records')\n\n\napp = Flask(__name__)\n\n\n@app.get(\"/\")\ndef index():\n    return redirect(\"/contacts\")\n\n\n@app.get(\"/contacts\")\ndef contacts():\n    search = request.args.get(\"q\")\n    contact_set = None\n    if search is not None: contact_set = Contact().search(search)\n    else: contact_set = Contact().all()\n    # print(contact_set)\n    return render_template(\"index.html\", contact_set=contact_set)\n\n\nfrom nbdev.export import nb_export\nnb_export(\"01_main.ipynb\", lib_path=\".\", name='main')",
+    "text": "import pandas as pd\nfrom flask import Flask, redirect, request, render_template\nimport json\nfrom IPython.display import display_html\n\n\npeople = [\n    {\n        \"firstname\": \"John\",\n        \"lastname\": \"Doe\",\n        \"phone\": \"555-1234\",\n        \"email\": \"john.doe@example.com\"\n    },\n    {\n        \"firstname\": \"Jane\",\n        \"lastname\": \"Smith\",\n        \"phone\": \"555-5678\",\n        \"email\": \"jane.smith@example.com\"\n    },\n    {\n        \"firstname\": \"Alice\",\n        \"lastname\": \"Johnson\",\n        \"phone\": \"555-8765\",\n        \"email\": \"alice.johnson@example.com\"\n    },\n    {\n        \"firstname\": \"Bob\",\n        \"lastname\": \"Williams\",\n        \"phone\": \"555-4321\",\n        \"email\": \"bob.williams@example.com\"\n    },\n    {\n        \"firstname\": \"Charlie\",\n        \"lastname\": \"Brown\",\n        \"phone\": \"555-9876\",\n        \"email\": \"charlie.brown@example.com\"\n    },\n    {\n        \"firstname\": \"Diana\",\n        \"lastname\": \"Miller\",\n        \"phone\": \"555-6543\",\n        \"email\": \"diana.miller@example.com\"\n    },\n    {\n        \"firstname\": \"Edward\",\n        \"lastname\": \"Davis\",\n        \"phone\": \"555-3456\",\n        \"email\": \"edward.davis@example.com\"\n    },\n    {\n        \"firstname\": \"Fiona\",\n        \"lastname\": \"Garcia\",\n        \"phone\": \"555-6789\",\n        \"email\": \"fiona.garcia@example.com\"\n    },\n    {\n        \"firstname\": \"George\",\n        \"lastname\": \"Martinez\",\n        \"phone\": \"555-7890\",\n        \"email\": \"george.martinez@example.com\"\n    },\n    {\n        \"firstname\": \"Hannah\",\n        \"lastname\": \"Rodriguez\",\n        \"phone\": \"555-8901\",\n        \"email\": \"hannah.rodriguez@example.com\"\n    }\n]\n\n# Writing the JSON data to a file\nfile_path = 'contactdb.json'\n# df = pd.read_json(file_path)\ndf = pd.DataFrame()\ndf = df.from_dict(people)\ndf['id'] = df.index\ndf.to_json(file_path, orient='records')\n\n\ndb = pd.read_json('contactdb.json')\ndb.to_dict('records')\n\n[{'firstname': 'John',\n  'lastname': 'Doe',\n  'phone': '555-1234',\n  'email': 'john.doe@example.com',\n  'id': 0},\n {'firstname': 'Jane',\n  'lastname': 'Smith',\n  'phone': '555-5678',\n  'email': 'jane.smith@example.com',\n  'id': 1},\n {'firstname': 'Alice',\n  'lastname': 'Johnson',\n  'phone': '555-8765',\n  'email': 'alice.johnson@example.com',\n  'id': 2},\n {'firstname': 'Bob',\n  'lastname': 'Williams',\n  'phone': '555-4321',\n  'email': 'bob.williams@example.com',\n  'id': 3},\n {'firstname': 'Charlie',\n  'lastname': 'Brown',\n  'phone': '555-9876',\n  'email': 'charlie.brown@example.com',\n  'id': 4},\n {'firstname': 'Diana',\n  'lastname': 'Miller',\n  'phone': '555-6543',\n  'email': 'diana.miller@example.com',\n  'id': 5},\n {'firstname': 'Edward',\n  'lastname': 'Davis',\n  'phone': '555-3456',\n  'email': 'edward.davis@example.com',\n  'id': 6},\n {'firstname': 'Fiona',\n  'lastname': 'Garcia',\n  'phone': '555-6789',\n  'email': 'fiona.garcia@example.com',\n  'id': 7},\n {'firstname': 'George',\n  'lastname': 'Martinez',\n  'phone': '555-7890',\n  'email': 'george.martinez@example.com',\n  'id': 8},\n {'firstname': 'Hannah',\n  'lastname': 'Rodriguez',\n  'phone': '555-8901',\n  'email': 'hannah.rodriguez@example.com',\n  'id': 9}]\n\n\n\nq = '1234'\n# db[db['firstname'].str.lower().str.contains(q)]\npredicate_firstname = db['firstname'].str.lower().str.contains(q.lower())\npredicate_lastname = db['lastname'].str.lower().str.contains(q.lower())\npredicate_phone = db['phone'].str.lower().str.contains(q.lower())\npredicate_email= db['email'].str.lower().str.contains(q.lower())\ndb[predicate_firstname|predicate_lastname|predicate_phone|predicate_email]\n\n\n\n\n\n\n\n\n\nfirstname\nlastname\nphone\nemail\nid\n\n\n\n\n0\nJohn\nDoe\n555-1234\njohn.doe@example.com\n0\n\n\n\n\n\n\n\n\n\ndb.columns\n\na={'firstname': 'Rahul',\n   'lastname': 'Saraf',\n    'phone':'7347306799',\n    'email': 'rahuketu86'}\na['id'] = len(db)\n# db.loc[len(db)] = \na\ndb.loc[len(db), a.keys()] = a.values()\n\n\ndb\n\n\n\n\n\n\n\n\n\nfirstname\nlastname\nphone\nemail\nid\n\n\n\n\n0\nJohn\nDoe\n555-1234\njohn.doe@example.com\n0.0\n\n\n1\nJane\nSmith\n555-5678\njane.smith@example.com\n1.0\n\n\n2\nAlice\nJohnson\n555-8765\nalice.johnson@example.com\n2.0\n\n\n3\nBob\nWilliams\n555-4321\nbob.williams@example.com\n3.0\n\n\n4\nCharlie\nBrown\n555-9876\ncharlie.brown@example.com\n4.0\n\n\n5\nDiana\nMiller\n555-6543\ndiana.miller@example.com\n5.0\n\n\n6\nEdward\nDavis\n555-3456\nedward.davis@example.com\n6.0\n\n\n7\nFiona\nGarcia\n555-6789\nfiona.garcia@example.com\n7.0\n\n\n8\nGeorge\nMartinez\n555-7890\ngeorge.martinez@example.com\n8.0\n\n\n9\nHannah\nRodriguez\n555-8901\nhannah.rodriguez@example.com\n9.0\n\n\n10\nRahul\nSaraf\n7347306799\nrahuketu86\n10.0\n\n\n\n\n\n\n\n\n\nclass Contact(object):\n    def __init__(self) -> None:\n        self.refresh()\n\n    def search(self, q):\n        predicate_firstname = self.db['firstname'].str.lower().str.contains(q.lower())\n        predicate_lastname = self.db['lastname'].str.lower().str.contains(q.lower())\n        predicate_phone = self.db['phone'].str.lower().str.contains(q.lower())\n        predicate_email= self.db['email'].str.lower().str.contains(q.lower())\n        filter_df = self.db[predicate_firstname|predicate_lastname|predicate_phone|predicate_email]\n        return filter_df.to_dict('records')\n    \n    def refresh(self):\n        self.file_path = 'contactdb.json'\n        self.db = pd.read_json(self.file_path)\n\n\n    def all(self):\n        return self.db.to_dict('records')\n    \n    def get(self, id):\n        contact = self.db[self.db['id']==id]\n        # print(contact)\n        return contact.to_dict('records')[0]\n    \n    def add(self, firstname, lastname, phone, email):\n        a={'firstname': firstname,\n           'lastname': lastname,\n           'phone':phone,\n           'email': email}\n        a['id'] = len(self.db)\n        self.db.loc[len(self.db), a.keys()] = a.values()\n        self.db.to_json(file_path, orient='records')\n        self.refresh()\n\n    def delete(self, id):\n        self.db.drop(index=id, inplace=True, errors='raise')\n        self.db.to_json(file_path, orient='records')\n        self.refresh()\n\n    def edit(self, id, firstname, lastname, phone, email):\n        a={'firstname': firstname,\n           'lastname': lastname,\n           'phone':phone,\n           'email': email,\n           'id': id}\n        self.db.loc[id, a.keys()] = a.values()\n        self.db.to_json(file_path, orient='records')\n        self.refresh()\n\n\nc = Contact()\nc.db.loc[2].to_dict().values()\n\ndict_values(['Alice', 'Johnson', '555-8765', 'alice.johnson@example.com', 2])\n\n\n\nnew_vals = [2, 'Alice', 'Johnson', '555-8767', 'alice.johnson@example.com']\nc.edit(*new_vals)\nc.get(2)\n\n{'firstname': 'Alice',\n 'lastname': 'Johnson',\n 'phone': '555-8767',\n 'email': 'alice.johnson@example.com',\n 'id': 2}\n\n\n\nc = Contact()\na_dict = c.db.loc[0].to_dict()\na_dict.pop('id', None); a_dict\nc.delete(0)\n\nc.add(*list(a_dict.values()))\nc.all()\n\n[{'firstname': 'Alice',\n  'lastname': 'Johnson',\n  'phone': '555-8767',\n  'email': 'alice.johnson@example.com',\n  'id': 2},\n {'firstname': 'Bob',\n  'lastname': 'Williams',\n  'phone': '555-4321',\n  'email': 'bob.williams@example.com',\n  'id': 3},\n {'firstname': 'Charlie',\n  'lastname': 'Brown',\n  'phone': '555-9876',\n  'email': 'charlie.brown@example.com',\n  'id': 4},\n {'firstname': 'Diana',\n  'lastname': 'Miller',\n  'phone': '555-6543',\n  'email': 'diana.miller@example.com',\n  'id': 5},\n {'firstname': 'Edward',\n  'lastname': 'Davis',\n  'phone': '555-3456',\n  'email': 'edward.davis@example.com',\n  'id': 6},\n {'firstname': 'Fiona',\n  'lastname': 'Garcia',\n  'phone': '555-6789',\n  'email': 'fiona.garcia@example.com',\n  'id': 7},\n {'firstname': 'George',\n  'lastname': 'Martinez',\n  'phone': '555-7890',\n  'email': 'george.martinez@example.com',\n  'id': 8},\n {'firstname': 'Hannah',\n  'lastname': 'Rodriguez',\n  'phone': '555-8901',\n  'email': 'hannah.rodriguez@example.com',\n  'id': 9},\n {'firstname': 'John',\n  'lastname': 'Doe',\n  'phone': '555-1234',\n  'email': 'john.doe@example.com',\n  'id': 9},\n {'firstname': 'Jane',\n  'lastname': 'Smith',\n  'phone': '555-5678',\n  'email': 'jane.smith@example.com',\n  'id': 9}]\n\n\n\napp = Flask(__name__)\n\n\n@app.get(\"/\")\ndef index():\n    return redirect(\"/contacts\")\n\n\n@app.get(\"/contacts\")\ndef contacts():\n    search = request.args.get(\"q\")\n    contact_set = None\n    if search is not None: contact_set = Contact().search(search)\n    else: contact_set = Contact().all()\n    # print(contact_set)\n    return render_template(\"index.html\", contact_set=contact_set)\n\n\nContact().db[df['id']==1].to_dict('records')[0]\n\n{'firstname': 'Bob',\n 'lastname': 'Williams',\n 'phone': '555-4321',\n 'email': 'bob.williams@example.com',\n 'id': 3}\n\n\n\n@app.get(\"/contacts/<int:id>\")\ndef view(id:int):\n    return render_template(\"view.html\", contact=Contact().get(id))\n\n\nwith app.app_context():\n    print(view(2))\n\n<!doctype html>\n<html>\n    <head>\n        <title>Contact.App</title>\n        <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css\">\n    </head>\n    <body>\n        <main class=\"container\">\n            <h1> CONTACTS.APP</h1>\n            <h2> A demo contact application </h2>\n            <hr>\n            \n    <article>\n        <h1>Alice Johnson </h1>\n        <div role=\"group\">\n            <div>555-8767</div>\n            <div>alice.johnson@example.com</div>\n        </div>\n        <footer>\n            <a href=\"/contacts\" role=\"button\">Back</a>\n        </footer>\n    </article>\n\n        </main>\n    </body>\n</html>\n\n\n\nContact().get(2)\n\n{'firstname': 'Alice',\n 'lastname': 'Johnson',\n 'phone': '555-8767',\n 'email': 'alice.johnson@example.com',\n 'id': 2}\n\n\n\n@app.put(\"/contacts/<int:id>/edit\")\ndef edit(id):\n    return \"Edit View\"\n\n\n@app.post(\"/contacts/new\")\ndef new():\n    return \"New View\"\n\n\nfrom nbdev.export import nb_export\nnb_export(\"01_main.ipynb\", lib_path=\".\", name='main')",
     "crumbs": [
       "Main App"
     ]

contactdb.json

@@ -1,62 +1 @@
-[
-    {
-        "firstname": "John",
-        "lastname": "Doe",
-        "phone": "555-1234",
-        "email": "john.doe@example.com"
-    },
-    {
-        "firstname": "Jane",
-        "lastname": "Smith",
-        "phone": "555-5678",
-        "email": "jane.smith@example.com"
-    },
-    {
-        "firstname": "Alice",
-        "lastname": "Johnson",
-        "phone": "555-8765",
-        "email": "alice.johnson@example.com"
-    },
-    {
-        "firstname": "Bob",
-        "lastname": "Williams",
-        "phone": "555-4321",
-        "email": "bob.williams@example.com"
-    },
-    {
-        "firstname": "Charlie",
-        "lastname": "Brown",
-        "phone": "555-9876",
-        "email": "charlie.brown@example.com"
-    },
-    {
-        "firstname": "Diana",
-        "lastname": "Miller",
-        "phone": "555-6543",
-        "email": "diana.miller@example.com"
-    },
-    {
-        "firstname": "Edward",
-        "lastname": "Davis",
-        "phone": "555-3456",
-        "email": "edward.davis@example.com"
-    },
-    {
-        "firstname": "Fiona",
-        "lastname": "Garcia",
-        "phone": "555-6789",
-        "email": "fiona.garcia@example.com"
-    },
-    {
-        "firstname": "George",
-        "lastname": "Martinez",
-        "phone": "555-7890",
-        "email": "george.martinez@example.com"
-    },
-    {
-        "firstname": "Hannah",
-        "lastname": "Rodriguez",
-        "phone": "555-8901",
-        "email": "hannah.rodriguez@example.com"
-    }
-]
+[{"firstname":"Alice","lastname":"Johnson","phone":"555-8767","email":"alice.johnson@example.com","id":2.0},{"firstname":"Bob","lastname":"Williams","phone":"555-4321","email":"bob.williams@example.com","id":3.0},{"firstname":"Charlie","lastname":"Brown","phone":"555-9876","email":"charlie.brown@example.com","id":4.0},{"firstname":"Diana","lastname":"Miller","phone":"555-6543","email":"diana.miller@example.com","id":5.0},{"firstname":"Edward","lastname":"Davis","phone":"555-3456","email":"edward.davis@example.com","id":6.0},{"firstname":"Fiona","lastname":"Garcia","phone":"555-6789","email":"fiona.garcia@example.com","id":7.0},{"firstname":"George","lastname":"Martinez","phone":"555-7890","email":"george.martinez@example.com","id":8.0},{"firstname":"Hannah","lastname":"Rodriguez","phone":"555-8901","email":"hannah.rodriguez@example.com","id":9.0},{"firstname":"John","lastname":"Doe","phone":"555-1234","email":"john.doe@example.com","id":9.0},{"firstname":"Jane","lastname":"Smith","phone":"555-5678","email":"jane.smith@example.com","id":9.0}]

main.py

@@ -1,18 +1,18 @@
 # AUTOGENERATED! DO NOT EDIT! File to edit: 01_main.ipynb.
 
 # %% auto 0
-__all__ = ['app', 'Contact', 'index', 'contacts']
+__all__ = ['app', 'Contact', 'index', 'contacts', 'view', 'edit', 'new']
 
 # %% 01_main.ipynb 2
 import pandas as pd
-from flask import Flask, redirect, request
-from flask import render_template
+from flask import Flask, redirect, request, render_template
 import json
+from IPython.display import display_html
 
-# %% 01_main.ipynb 6
+# %% 01_main.ipynb 8
 class Contact(object):
     def __init__(self) -> None:
-        self.db = pd.read_json('contactdb.json')
+        self.refresh()
 
     def search(self, q):
         predicate_firstname = self.db['firstname'].str.lower().str.contains(q.lower())
@@ -21,19 +21,55 @@ class Contact(object):
         predicate_email= self.db['email'].str.lower().str.contains(q.lower())
         filter_df = self.db[predicate_firstname|predicate_lastname|predicate_phone|predicate_email]
         return filter_df.to_dict('records')
+    
+    def refresh(self):
+        self.file_path = 'contactdb.json'
+        self.db = pd.read_json(self.file_path)
+
 
     def all(self):
         return self.db.to_dict('records')
+    
+    def get(self, id):
+        contact = self.db[self.db['id']==id]
+        # print(contact)
+        return contact.to_dict('records')[0]
+    
+    def add(self, firstname, lastname, phone, email):
+        a={'firstname': firstname,
+           'lastname': lastname,
+           'phone':phone,
+           'email': email}
+        a['id'] = len(self.db)
+        self.db.loc[len(self.db), a.keys()] = a.values()
+        self.db.to_json(file_path, orient='records')
+        self.refresh()
+
+    def delete(self, id):
+        self.db.drop(index=id, inplace=True, errors='raise')
+        self.db.to_json(file_path, orient='records')
+        self.refresh()
+
+    def edit(self, id, firstname, lastname, phone, email):
+        a={'firstname': firstname,
+           'lastname': lastname,
+           'phone':phone,
+           'email': email,
+           'id': id}
+        self.db.loc[id, a.keys()] = a.values()
+        self.db.to_json(file_path, orient='records')
+        self.refresh()
+
 
-# %% 01_main.ipynb 7
+# %% 01_main.ipynb 12
 app = Flask(__name__)
 
-# %% 01_main.ipynb 8
+# %% 01_main.ipynb 13
 @app.get("/")
 def index():
     return redirect("/contacts")
 
-# %% 01_main.ipynb 9
+# %% 01_main.ipynb 14
 @app.get("/contacts")
 def contacts():
     search = request.args.get("q")
@@ -42,3 +78,18 @@ def contacts():
     else: contact_set = Contact().all()
     # print(contact_set)
     return render_template("index.html", contact_set=contact_set)
+
+# %% 01_main.ipynb 16
+@app.get("/contacts/<int:id>")
+def view(id:int):
+    return render_template("view.html", contact=Contact().get(id))
+
+# %% 01_main.ipynb 19
+@app.put("/contacts/<int:id>/edit")
+def edit(id):
+    return "Edit View"
+
+# %% 01_main.ipynb 20
+@app.post("/contacts/new")
+def new():
+    return "New View"

templates/index.html

@@ -2,6 +2,12 @@
 
 {% block content %}
 
+    <form action="/contacts" method="get">
+        <fieldset role="search">
+            <input id="search" type="search" name="q" value="{{ request.args.get('q') or '' }}" />
+            <input type="submit" value="Search"/>
+        </fieldset>
+    </form>
     <table class="striped">
         <thead>
             <tr>
@@ -9,6 +15,7 @@
                 <th>Last Name</th>
                 <th>Phone</th>
                 <th>Email</th>
+                <th>Controls</th>
             </tr>
         </thead>
         {% for contact in contact_set %}
@@ -17,10 +24,16 @@
                 <td>{{contact['lastname']}}</td>
                 <td>{{contact['phone']}}</td>
                 <td>{{contact['email']}}</td>
+                <td>
+                    <div role="group">
+                        <a href="/contacts/{{contact.id}}/edit" role="button">Edit</a>
+                        <a href="/contacts/{{contact.id}}" role="button">View</a>
+                    </div>
+                </td>
             </tr>
         {% endfor %}
-
-
     </table>
-
+    <p>
+        <a href="/contacts/new" role="button">Add contact</a>
+    </p>
 {% endblock %}

templates/layout.html

@@ -6,6 +6,9 @@
     </head>
     <body>
         <main class="container">
+            <h1> CONTACTS.APP</h1>
+            <h2> A demo contact application </h2>
+            <hr>
             {% block content %}{% endblock %}
         </main>
     </body>

templates/view.html

@@ -0,0 +1,14 @@
+{% extends "layout.html" %}
+
+{% block content %}
+    <article>
+        <h1>{{contact['firstname']}} {{contact['lastname']}} </h1>
+        <div role="group">
+            <div>{{contact['phone']}}</div>
+            <div>{{contact['email']}}</div>
+        </div>
+        <footer>
+            <a href="/contacts" role="button">Back</a>
+        </footer>
+    </article>
+{% endblock %}